2017-08-10 43 views
1

我想使用新的窗体自动完成功能,我尝试过,但没有下拉列表打开,并建议用于搜索的单词。 类= “自动完成” 应加入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脚本:

如果它适用于其他人,请告诉我如何使它适合我。 如果有人有任何自动完成链接,然后分享我。

+1

这将是很好的链接你的代码托管在jsFiddle上,但这里是我的http://jsfiddle.net/LCv8L/1110/ – dawit

+0

其工作,谢谢.. – gaurav

回答

0

你的代码有一点问题。正如你一定知道物化的自动完成设施与输入字段一样。 因此,你必须提供一个类的text-type-input元素是类专区内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' 
    }; 

我想什么,代码应该看起来像一个 -

$('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。 猜猜这有助于。

相关问题