マテリアライズを使用してオートコンプリートが動作しません

Question

新しいフォームオートコンプリートを使いたいのですが、試してみましたが、ドロップダウンリストが開いて検索のための単語が示唆されていません。オートコンプリート検索するための クラス= "オートコンプリート" はjQueryの$（input.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

コードに少し問題があります。マテリアライズのオートコンプリート機能は、入力フィールドで動作することを知っておく必要があります。 したがって、あなたはクラスのdiv要素の中に、私は推測何input-field

$("#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' 
    }; 

あるtext-type-input要素の一つにクラスを提供する必要があり、コードは次のようになります -

$('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。 これが役立つと思います。