jQuery自动完成悬停问题

Question

我正在使用自定义的 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>")
                }
            });
        });