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返回元素列表。我想问一下如何在输入下方显示列表？

大多数示例建议使用JQuery-ui's autocomplete功能，但在使用cdn时，它会混淆代码的其余部分。

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

Answer 1

您需要创建收到的项目列表，并将其附加到某种容器中。这是一个例子：

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;
}

这些方面应该有所作为。

Answer 2

是的，您可以使用自定义jquery和css代码执行此操作，只需在jquery代码中进行一些修改，如下所示： -

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

    var listItem = "<ul>";

    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;

                $.each(sku_list, function (index, item) {
                    listItem += "<li>"+item+"</li>";
                });
                listItem += "</ul>";

                $(this).after(listItem);
            },

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

它可能对你有帮助。

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

2 个答案: