如何將自動完成部分添加到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返回一個元素列表。我想問如何顯示輸入下面的列表？

大多數示例建議使用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); 
      } 
     }); 
    } 
}); 

它可以幫助你。