我正在使用自定义的 renderItem 函数在搜索框的左侧和右侧显示标签。因此,当我将鼠标悬停在搜索结果上时,顶部会出现一个奇怪的蓝色框,该框似乎只覆盖左侧的文本标签,而不覆盖整个行。我也不希望悬停使文本在选择过程中不可见。
我面临的第二个问题是即使获取了结果并显示了结果。仅当我先删除输入的文本时,它们才会显示。例如,如果我写了“ f”,而ajax得到了结果。仅当我先使用退格键删除“ f”时,搜索框才会显示。
我将以下代码用于自动填充
$("#searchbox").keyup(function(){
var store = [];
$.ajax({
type: "POST",
dataType: 'json',
url: "parseGetIngredients.php",
data:'word='+$(this).val(),
beforeSend: function(){
$("#searchbox").css("background","#FFF url(LoaderIcon.gif) no-repeat 450px");
},
success: function(data){
$("#searchbox").css("background","#FFF");
console.log(data);
jQuery.each(data["ingredients"], function(index, item) {
console.log("Here", item);
//store.push(item);
store.push( {
"name": item.name,
"kCal": parseInt(item.KHValue * 4.1 + item.EWValue * 4.1 + item.FEValue * 9.3 + item.ALKValue * 7.1) + " kcal / " + "100g"
}
);
//store["name"] = item.name;
//store["kcal"] = item.category;
});
console.log(store);
var x;
$( "#searchbox" ).autocomplete({
source: store,
minLength: 0,
select: function(event, ui) {
x = ui.item.name;
event.preventDefault();
$(this).val(x);
},
focus: function(event, ui) {
event.preventDefault();
$("#searchbox").val(ui.item.name);
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
// Here you are returning the element which will be rendered
console.log("Item: ", item);
return $("<li></li>")
.data("ui-autocomplete-item", item)
.append("<a><div style='float:left;'>" + item.name + "</div><div style='float:right;'>" + item.kCal + "</div></a>")
.appendTo(ul);
};
return $("<li></li>")
}
});
});