javascript - 使用 Materialize 自动完成功能对我不起作用

Question

我想使用新的表单自动完成功能，我尝试了它，但没有打开下拉列表并建议搜索单词。应该为 jquery $(input.autocomplete) 添加 class="autocomplete"......而我的 jquery 代码是......

$("#productName").keyup(function (e) {
var min_length = 0;
var keyword = $('#productName').val();
$(function () {
if (keyword.length >= min_length) {
$.ajax({
url: "/getSearchedProductName",
type: 'POST',
datatype: 'JSON',
data: {
method: 'getSearchedProductName',
keyword: keyword
},
success: function (response) {
response = JSON.parse(response);
var projects = new Array();
var array = new Array();
var arr = new Array();
$.each(response.data, function (key, value) {
var projects = {
value1: value.product_name,
value2: value.image_url
};
array.push(projects);
});
$(function () {
$("#productName").autocomplete({
data: {
"Google": 'http://placehold.it/250x250',
"G1": 'http://placehold.it/250x250',
"G2": 'http://placehold.it/250x250',
"Go3": 'http://placehold.it/250x250',
"G4": 'http://placehold.it/250x250'
};

.autocomplete("instance")._renderItem = function (ul, item) {
return $("<li>").append("<div class='autocomplete-content dropdown-  content' data-id=" + item.value + ">" + item.label + "</div>")
                                        .appendTo(ul);
};

if (e.which === 13) {
$.each(response.data, function (i, v) {
var prodID = v['product_id'];
if (prodID != null) {
window.location = webUrl + "/categorySearchItems?productId=" + prodID;
}
});
}
});
}
});
}
});
});

对于自动完成搜索，我使用了 cdn 脚本:

如果它对其他人有用，请告诉我如何让它对我有用。如果有人有任何自动完成的链接，请分享给我。

Answer 1

你的代码有一个小问题。您必须知道，Materialize 的自动完成功能可与输入字段配合使用。因此，您必须为 input-field 类的 div 内的 text-type-in​​put 元素之一提供一个类。

$("#productName").autocomplete({
  data: {
    "Google": 'http://placehold.it/250x250',
    "G1": 'http://placehold.it/250x250',
    "G2": 'http://placehold.it/250x250',
    "Go3": 'http://placehold.it/250x250',
    "G4": 'http://placehold.it/250x250'
  };

我猜，代码应该是这样的 -

$('input.autocomplete').autocomplete({
  data: {
    "Google": 'http://placehold.it/250x250',
    "G1": 'http://placehold.it/250x250',
    "G2": 'http://placehold.it/250x250',
    "Go3": 'http://placehold.it/250x250',
    "G4": 'http://placehold.it/250x250'
  }
});

上面的代码定义了input元素的类autocomplete。我想这会有所帮助。