jquery - 如何将自动完成部分添加到html输入字段

Question

我有一个带有 ajax 的输入字段，它返回与输入匹配的元素列表。

<input name="sku_id" type="text" placeholder="SKU" class="form-control" autofocus>

$('[name="sku_id"]').on('keyup', function(event){
    event.preventDefault();
    var sku_id = $('[name="sku_id"]').val();

    if ( sku_id.length > 2){
        $.ajax({
            url : "/sku_auto/",
            type : "POST",
            data : {action:'search_sku',
                    sku_id:sku_id},

            success : function(response){
                var sku_list = response.sku_list;
                console.log(sku_list);
            },

            error : function(xhr,errmsg,err) {
                console.log(xhr.status + ": " + xhr.responseText);
            }
        });
    }
});

ajax 返回一个元素列表。请问如何在input下方显示列表？

大多数示例建议使用 JQuery-ui 的自动完成 功能，但在使用 cdn 时它会干扰其余代码。

我想知道我是否必须为此编写 css 还是可以直接附加它？

Answer 1

您需要创建一份收到的元素 list ，并将其附加到某种容器中。这是一个例子:

function createAutoCompleteList(sku_list, input) {
    var container = $('<div class="autocomplete-container">');
    var ul = $('<ul>').appendTo(container);

    $.each(sku_list, function (index, item) {
        var listItem = $("<li>").append(item);
        //You can add click event to the item here.
        ul.append(listItem); 
    });

    input.after(container);
}

有了这个容器后，您将需要一些 CSS。另一个例子:

.autocomplete-container {
    position: absolute;
    width: 100%;
    background-color: white;
} 

按照这些思路应该可以工作。