我尝试使用您的tube中的脚本:https://www.youtube.com/watch?v=YqMtE8UO-xw我的自动建议列表是冻结铬现在它工作之前不确定为什么铬现在冻结。我有以下查询:
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchquery").keyup(function(){
$.get("suggest.php", {searchquery: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data);}); }); });</script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchquery2").keyup(function(){
$.get("suggest1.php", {searchquery2: $(this).val()}, function(data){
$("datalist").empty();
$("datalist").html(data); }); });});</script>
&我有以下输入:
<th width="170" scope="col"><input type="text" size="25" name="searchquery2" id="searchquery2" placeholder="Business Type" list="datalist1"/><datalist id="datalist1" /> </datalist> </th>
<th width="170" scope="col"><input type="text" list="myCompanies" size="25" name="searchquery" id="searchquery" placeholder="Suburb, City, or Postcode"/><datalist id="myCompanies" /> </datalist></th>
发送许多ajax请求会使浏览器冻结。我建议您暂停请求,只将最后一个值发送到服务器。超时等待,若用户并没有键入任何内容,则发送请求。我还建议使用input
事件而不是keyup
。你的代码应该是这样的:
$(document).ready(function() {
$("#searchquery").on('input', function() {
clearTimeout(window.t1);
window.t1 = setTimeout(function() {
$.get("suggest.php", {
searchquery: $(this).val()
}, function(data) {
$("datalist").empty();
$("datalist").html(data);
});
}, 1000);
});
$("#searchquery2").on('input', function() {
clearTimeout(window.t2);
window.t2 = setTimeout(function() {
$.get("suggest1.php", {
searchquery2: $(this).val()
}, function(data) {
$("datalist").empty();
$("datalist").html(data);
});
}, 1000);
});
});