所以我在 Javascript 中有这个自动完成功能,但它没有完全工作。自动完成列表不可单击,因此当您单击列表中的项目时,文本框中不会填充任何内容。
HTML:
<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">
</div>
</div>
Javascript:
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 fill(thisValue)
{
$('.inputString').val(thisValue);
setTimeout("$('.suggestions').hide();", 200);
}
查询:
if(isset($_POST['queryString']))
{
$queryString = $db->real_escape_string($_POST['queryString']);
// Is the string length greater than 0?
if(strlen($queryString) >0)
{
$query = $db->query("SELECT naam_klant FROM overboekingen WHERE naam_klant LIKE '$queryString%' LIMIT 10");
if($query)
{
while ($result = $query ->fetch_object())
{
echo '<li onClick="fill(\''.$result->naam_klant.'\');">'.$result->naam_klant.'</li>';
}
}
else
{
echo 'ERROR: There was a problem with the query.';
}
}
else
{
} // There is a queryString.
}
else
{
echo 'There should be no direct access to this naam_klant script!';
}
}
最佳答案
您的填充函数中有几个错误,请尝试:
function fill(thisValue)
{
$('#naam_klant').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}
您正在寻找一个不存在的“inputString”类的文本字段。同样,您正在寻找“建议”类,而“建议”实际上是 div 的 ID。您可能希望将建议 div 更改为
- ,因为您正在将
- 加载到其中。
这是一个 JSFiddle - http://jsfiddle.net/DjuJ4/1/ (注意:出于测试目的,我已将您的 ajax 调用替换为静态数据变量)
关于javascript - 自动完成功能不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22807843/