Javascript jQuery无法使用文本框的自动填充
我的jQuery停止工作，我更改了我使用的库，并从另一个项目迁移了一些代码。文本框自动填充来自mySQL的数据，然后您可以从列表中选择它们。当您在文本框中键入内容时，我会看到填充的列表，但如果您单击列表中的某个项目，则文本框中不会填充任何内容 这是我的代码，对初学者的任何帮助都会很好Javascript jQuery无法使用文本框的自动填充,javascript,jquery,Javascript,Jquery,我的jQuery停止工作，我更改了我使用的库，并从另一个项目迁移了一些代码。文本框自动填充来自mySQL的数据，然后您可以从列表中选择它们。当您在文本框中键入内容时，我会看到填充的列表，但如果您单击列表中的某个项目，则文本框中不会填充任何内容 这是我的代码，对初学者的任何帮助都会很好 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boekingsfilter</title>
<link rel="stylesheet" href="OrganicTabs/css/style.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../JqueryUI/js/jquery.js"></script>
<script src="OrganicTabs/js/organictabs.jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#example-one").organicTabs();
});
function lookup(inputString) {
if (inputString.length == 0) {
$('#suggestions').hide();
}
else {
$.post("sql_naam_klant.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0){
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
}
function lookup2(inputString) {
if(inputString.length == 0) {
$('#suggestions2').hide();
}
else {
$.post("sql_boekingsnummer.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0) {
$('#suggestions2').show();
$('#autoSuggestionsList2').html(data);
}
});
}
}
function lookup3(inputString) {
if(inputString.length == 0) {
$('#suggestions3').hide();
}
else {
$.post("sql_bedrag_van_boete.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0){
$('#suggestions3').show();
$('#autoSuggestionsList3').html(data);
}
});
}
}
function lookup4(inputString) {
if(inputString.length == 0) {
$('#suggestions4').hide();
}
else {
$.post("sql_distributiekanaal.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0){
$('#suggestions4').show();
$('#autoSuggestionsList4').html(data);
}
});
}
}
function lookup5(inputString) {
if(inputString.length == 0) {
$('#suggestions5').hide();
}
else {
$.post("sql_huiscode.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0){
$('#suggestions5').show();
$('#autoSuggestionsList5').html(data);
}
});
}
}
function lookup6(inputString) {
if(inputString.length == 0) {
$('#suggestions6').hide();
}
else {
$.post("sql_huursom.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0){
$('#suggestions6').show();
$('#autoSuggestionsList6').html(data);
}
});
}
}
function lookup7(inputString) {
if(inputString.length == 0) {
$('#suggestions7').hide();
}
else {
$.post("sql_opmerking.php", {queryString: ""+inputString+""},
function(data) {
if(data.length >0){
$('#suggestions7').show();
$('#autoSuggestionsList7').html(data);
}
});
}
}
function fill(thisValue) {
$('#naam_klant').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
function fill2(thisValue) {
$('#boekingsnummer').val(thisValue);
setTimeout("$('#suggestions2').hide();", 200);
}
function fill3(thisValue) {
$('#bedrag_van_boete').val(thisValue);
setTimeout("$('#suggestions3').hide();", 200);
}
function fill4(thisValue) {
$('#distributiekanaal').val(thisValue);
setTimeout("$('#suggestions4').hide();", 200);
}
function fill5(thisValue) {
$('#huiscode').val(thisValue);
setTimeout("$('#suggestions5').hide();", 200);
}
function fill6(thisValue) {
$('#huursom').val(thisValue);
setTimeout("$('#suggestions6').hide();", 200);
}
function fill7(thisValue) {
$('#opmerking').val(thisValue);
setTimeout("$('#suggestions7').hide();", 200);
}
</script>
看到HTMLI添加HTML可能会有所帮助，谢谢！
<div id="page-wrap">
<h1 style="text-align:center;">Boekings filter</h1>
<div id="example-one">
<ul class="nav">
<li class="a"><a href="#medewerker" class="current">Medewerker</a></li>
<li class="b"><a href="#datum_overboeking" class="current">Datum overboeking</a></li>
<li class="c"><a href="#juliete_geinformeerd" class="current">Juliette geinformeerd</a></li>
<li class="d"><a href="#boekingsnummer" class="current">Boekingsnummer</a></li>
<li class="e"><a href="#land" class="current">Land</a></li>
<li class="f"><a href="#huiscode" class="current">Huiscode</a></li>
<li class="g"><a href="#aanbieder" class="current">Aanbieder</a></li><br><br><br>
<li class="h"><a href="#contractvorm" class="current">Contractvorm</a></li>
<li class="i"><a href="#huursom" class="current">Huursom</a></li>
<li class="j"><a href="#periode_van" class="current">Periode van</a></li>
<li class="k"><a href="#periode_tot" class="current">Periode tot</a></li>
<li class="l"><a href="#distributiekanaal" class="current">Distributiekanaal</a></li>
<li class="m"><a href="#naam_klant" class="current">Naam klant</a></li>
<li class="n"><a href="#reden" class="current">Reden</a></li><br><br><br>
<li class="o"><a href="#nieuwe_boeking" class="current">Nieuwe boeking</a></li>
<li class="p"><a href="#reden_geen_nieuwe_boeking" class="current">Reden geen nieuwe boeking</a></li>
<li class="q"><a href="#boete_aanbieden" class="current">Boete aanbieden</a></li>
<li class="r"><a href="#administratie_geinformeerd_voor_inhouding_boete" class="current">Administratie geinformeerd voor inhouding boete</a></li>
<li class="s"><a href="#bedrag_van_boete" class="current">Bedrag van boete</a></li>
<li class="t"><a href="#coulance_happyhome" class="current">Coulance Happyhome</a></li>
<li class="u"><a href="#opmerking" class="current">Opmerking</a></li>
</ul>
<div class="list-wrap">
<ul id="medewerker" class="hide">
<li><label for="medewerker"><h4>Medewerker</h4></label><br></li>
<li><input type="checkbox" id="medewerker" name="medewerker">Charlene<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker1">Ellen<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker2">Esmeralda<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker3">Lieke<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker4">Mandy<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker5">Manon<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker6">Samantha<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker7">Sonja<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker8">Susan<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker9">Susanne<br></li>
<li><input type="checkbox" id="medewerker" name="medewerker10">Simone<br></li>
</ul>
<ul id="datum_overboeking" class="hide">
<li><label for="datum_overboeking"><h4>Datum overboeking</h4></label></li>
<li><input type="checkbox" id="datum_overboeking" name="datum_overboeking"></li>
</ul>
<ul id="juliete_geinformeerd" class="hide">
<li><label for="juliete_geinformeerd"><h4>Juliette geinformeerd</h4></label></li>
<li><input type="checkbox" id="juliette_geinformeerd" name="juliette_geinformeerd1">ja<br></li>
<li><input type="checkbox" id="juliette_geinformeerd" name="juliette_geinformeerd2">nee</li>
</ul>
<ul id="boekingsnummer" class="hide">
<li><label>Boekingsnummer</label></li>
<li><input type="text" name="boekingsnummer" size="20" id="boekingsnummer" onkeyup="lookup2(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions2" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList2"></li>
</ul>
<ul id="land" class="hide">
<li><label for="land"><h4>Land</h4></label>
<li><input type="checkbox" id="land" name="land1">Nederland<br></li>
<li><input type="checkbox" id="land" name="land2">België<br></li>
<li><input type="checkbox" id="land" name="land3">Duitsland<br></li>
<li><input type="checkbox" id="land" name="land4">Frankrijk<br></li>
<li><input type="checkbox" id="land" name="land5">Hongarije<br></li>
<li><input type="checkbox" id="land" name="land6">Italië<br></li>
<li><input type="checkbox" id="land" name="land7">Kroatië<br></li>
<li><input type="checkbox" id="land" name="land8">Luxemburg<br></li>
<li><input type="checkbox" id="land" name="land9">Oostenrijk<br></li>
<li><input type="checkbox" id="land" name="land10">Slovenië<br></li>
<li><input type="checkbox" id="land" name="land11">Spanje<br></li>
<li><input type="checkbox" id="land" name="land12">Tsjechië<br></li>
<li><input type="checkbox" id="land" name="land13">Zwitserland<br></li>
</ul>
<ul id="huiscode" class="hide">
<li><label>huiscode</label></li>
<li><input type="text" name="huiscode" size="20" id="huiscode" onkeyup="lookup5(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions5" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList5"></li>
</ul>
<ul id="aanbieder" class="hide">
<li><label for="aanbieder"><h4>Aanbieder</h4></label></li>
<li><input type="checkbox" id="aanbieder" name="aanbieder1">Agent<br></li>
<li><input type="checkbox" id="aanbieder" name="aanbieder2">Camping<br></li>
<li><input type="checkbox" id="aanbieder" name="aanbieder3">Park<br></li>
<li><input type="checkbox" id="aanbieder" name="aanbieder4">Particulier<br></li>
</ul>
<ul id="contractvorm" class="hide">
<li><label for="contractvorm"><h4>Contractvorm</h4></label></li>
<li><input type="checkbox" id="contractvorm" name="contractvorm1">Aanvraag<br></li>
<li><input type="checkbox" id="contractvorm" name="contractvorm2">Exclusiviteit<br></li>
<li><input type="checkbox" id="contractvorm" name="contractvorm3">Prioriteit<br></li>
</ul>
<ul id="huursom" class="hide">
<li><label>huursom</label></li>
<li><input type="text" name="huursom" size="20" id="huursom" onkeyup="lookup6(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions6" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList6"></li>
</ul>
<ul id="periode_van" class="hide">
<li><label for="periode_van"><h4>Periode van</h4></label></li>
<li><input type="checkbox" id="periode_van" name="periode_van"></li>
</ul>
<ul id="periode_tot" class="hide">
<li><label for="periode_tot"><h4>Periode tot</h4></label></li>
<li><input type="checkbox" id="periode_tot" name="periode_tot"></li>
</ul>
<ul id="distributiekanaal" class="hide">
<li><label>Distributiekanaal</label></li>
<li><input type="text" name="boekingsnummer" size="20" id="distributiekanaal" onkeyup="lookup4(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions4" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList4"></li>
</ul>
<ul id="naam_klant" class="hide">
<li><label>Naam klant</label></li>
<li><input type="text" name="naam_klant" size="20" id="naam_klant" onkeyup="lookup(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList"></li>
</ul>
<ul id="reden" class="hide">
<li><label for="reden"><h4>Reden</h4></label></li>
<li><input type="checkbox" id="reden" name="reden1">Agent mistake did not informed HappyHome about EV<br></li>
<li><input type="checkbox" id="reden" name="reden2">Agent mistake did not block in LandLord<br></li>
<li><input type="checkbox" id="reden" name="reden3">Calamities ( can not rent) Sale<br></li>
<li><input type="checkbox" id="reden" name="reden4">Contract is not extended<br></li>
<li><input type="checkbox" id="reden" name="reden5">Create Double allotment in LandLord<br></li>
<li><input type="checkbox" id="reden" name="reden6">Exit<br></li>
<li><input type="checkbox" id="reden" name="reden7">HappyHome mistake blokking not all<br></li>
<li><input type="checkbox" id="reden" name="reden8">HappyHome mistake blokking to late in LandLord<br></li>
<li><input type="checkbox" id="reden" name="reden9">Other<br></li>
<li><input type="checkbox" id="reden" name="reden10">Park/Camping mistake did not block in LandLord<br></li>
<li><input type="checkbox" id="reden" name="reden11">Park/Camping mistake did not informed HappyHome about EV<br></li>
<li><input type="checkbox" id="reden" name="reden12">Privat owner mistake did not block in LandLord<br></li>
<li><input type="checkbox" id="reden" name="reden13">Privat owner mistake did not informed HappyHome about EV<br></li>
<li><input type="checkbox" id="reden" name="reden14">Stamgasten (regular guests)<br></li>
<li><input type="checkbox" id="reden" name="reden15">Itea<br></li>
<li><input type="checkbox" id="reden" name="reden16">Price is not correct misstake owner<br></li>
<li><input type="checkbox" id="reden" name="reden17">Inkoper niet juiste contractform aangehouden<br></li>
<li><input type="checkbox" id="reden" name="reden18">To many people<br></li>
</ul>
<ul id="nieuwe_boeking" class="hide">
<li><label for="nieuwe_boeking"><h4>Nieuwe boeking</h4></label></li>
<li><input type="checkbox" id="nieuwe_boeking" name="nieuwe_boeking1">No<br></li>
<li><input type="checkbox" id="nieuwe_boeking" name="nieuwe_boeking2">Yes<br></li>
<li><input type="checkbox" id="nieuwe_boeking" name="nieuwe_boeking3">Not Yet<br></li>
</ul>
<ul id="reden_geen_nieuwe_boeking" class="hide">
<li><label for="reden_geen_nieuwe_boeking"><h4>Reden geen nieuwe boeking</h4></label></li>
<li><input type="checkbox" id="reden_geen_nieuwe_boeking" name="reden_geen_nieuwe_boeking1">Guest did booked somewhere else<br></li>
<li><input type="checkbox" id="reden_geen_nieuwe_boeking" name="reden_geen_nieuwe_boeking2">No good alternative in that area<br></li>
<li><input type="checkbox" id="reden_geen_nieuwe_boeking" name="reden_geen_nieuwe_boeking3">Guest did not response<br></li>
<li><input type="checkbox" id="reden_geen_nieuwe_boeking" name="reden_geen_nieuwe_boeking4">Otherwhise ….. Fillin true -> Esmeralda<br></li>
</ul>
<ul id="boete_aanbieden" class="hide">
<li><label for="boete_aanbieden"><h4>Boete aanbieden</h4></label></li>
<li><input type="checkbox" id="boete_aanbieden" name="boete_aanbieden1">Yes<br></li>
<li><input type="checkbox" id="boete_aanbieden" name="boete_aanbieden2">No<br></li>
</ul>
<ul id="administratie_geinformeerd_voor_inhouding_boete" class="hide">
<li><label for="administratie_geinformeerd_voor_inhouding_boete"><h4>Administratie geinformeerd voor inhouding boete</h4></label></li>
<li><input type="checkbox" id="administratie_geinformeerd_voor_inhouding_boete" name="administratie_geinformeerd_voor_inhouding_boete1">Yes<br></li>
<li><input type="checkbox" id="administratie_geinformeerd_voor_inhouding_boete" name="administratie_geinformeerd_voor_inhouding_boete2">No<br></li>
<li><input type="checkbox" id="administratie_geinformeerd_voor_inhouding_boete" name="administratie_geinformeerd_voor_inhouding_boete3">Not yet<br></li>
</ul>
<ul id="bedrag_van_boete" class="hide">
<li><label>Bedrag van boete</label></li>
<li><input type="text" name="bedrag_van_boete" size="20" id="bedrag_van_boete" onkeyup="lookup3(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions3" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList3"></li>
</ul>
<ul id="coulance_happyhome" class="hide">
<li><label for="coulance_happyhome"><h4>Coulance Happyhome</h4></label></li>
<li><input type="checkbox" id="coulance_happyhome" name="coulance_happyhome1">Coulance Agent<br></li>
<li><input type="checkbox" id="coulance_happyhome" name="coulance_happyhome2">Coulance Camping<br></li>
<li><input type="checkbox" id="coulance_happyhome" name="coulance_happyhome3">Coulance Park<br></li>
<li><input type="checkbox" id="coulance_happyhome" name="coulance_happyhome4">Coulance Privatowner<br></li>
<li><input type="checkbox" id="coulance_happyhome" name="coulance_happyhome5">Coulance HappyHome<br></li>
</ul>
<ul id="opmerking" class="hide">
<li><label>Opmerking</label></li>
<li><input type="text" name="opmerking" size="20" id="opmerking" onkeyup="lookup7(this.value);" onblur="fill();" >
<div class="suggestionsBox" id="suggestions7" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList7"></li>
</ul>
</div>
</div>
<table id="employees">
<tr>
<thead>
<th>Medewerker</th>
<th>Datum overboeking</th>
<th>Juliette geinformeerd</th>
<th>Boekingsnummer</th>
<th>Land</th>
<th>Huiscode</th>
<th>Aanbieder</th>
<th>Contractvorm</th>
<th>Huursom</th>
<th>Periode van</th>
<th>Periode tot</th>
<th>Distributiekanaal</th>
<th>Naam klant</th>
<th>Reden</th>
<th>Nieuwe boeking</th>
<th>Reden geen nieuwe boeking</th>
<th>Boete aanbieden</th>
<th>Administratie geinformeerd voor inhouding boete</th>
<th>Bedrag van boete</th>
<th>Coulance Happyhome</th>
<th>Opmerking</th>
<th>Id</th>
</thead>
</tr>
</table>
</div>