我尝试通过 ajax 向使用 jquery 的文本框显示自动完成(建议)列表。
这是我的HTML:
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Depart Location</label>
<input type="text" id="flightFrom" name="flightFrom" class="form-control locKeyword" data-rule-required="true">
<div class="suggest-list"></div>
</div>
</div>
在 ajax 进程之后,我想在“建议列表”上显示 ajax 响应。请注意,该页面有许多“表单组”类,我想在其中显示输入类型文本框和类为“locKeyword”的“表单组”。
if ($('.locKeyword').length > 0) {
$('.locKeyword').each(function () {
$(this).keyup(function(event){
var sKeyword = $(this).val();
if(sKeyword.length){ //IF 1
if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13){
$.ajax({
'method' :'GET',
'url' : 'search.php',
data : "locKeyword="+sKeyword,
success : function(msg){
if(msg != 0){
$('.locKeyword').closest('.form-group').find('.suggest-list').fadeIn().html(msg);
}else{
$(".suggest-list").fadeIn();
$(".suggest-list").html('<div style="text-align:left;">No station found!</div>');
}
}
});
}else{
switch (event.keyCode)
{
case 40:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.next().addClass("selected");
sel.removeClass("selected");
}
else
$("li:first").addClass("selected");
}
break;
case 38:
{
found = 0;
$("li").each(function(){
if($(this).attr("class") == "selected")
found = 1;
});
if(found == 1)
{
var sel = $("li[class='selected']");
sel.prev().addClass("selected");
sel.removeClass("selected");
}
else
$("li:last").addClass("selected");
}
break;
case 13:
$locKeyword.closest('.form-group').find('.suggest-list').fadeOut()
$locKeyword.val($("li[class='selected'] a").text());
break;
}
}
}else{
$(".suggest-list").fadeOut("slow");
}
});
});
}
Ajax 响应工作正常。我想为函数中的所有表单组创建它。Ajax 打印列表并通过单击任何列表项值将插入文本框。我怎么了?