这是我的代码
<script>
$(function() {
var availableTags1 = [
{"key": "1","name": "NAME 1"},{"key": "2","name": "NAME 2"},{"key": "3","name": "NAME 3"}
];
var availableTags2=[
{"key":"22","value":"Ahmedabad"},{"key":"23","value":"Bangalore"},{"key":"24","value":"Chandigarh"},{"key"
:"25","value":"Chennai"}];
$( "#project-name" ).autocomplete({
minLength: 0,
source: availableTags2,
select: function( event, ui ) {
$("#project-name").val( ui.item.value );
}
});
});
</script>
<input id="project-name" name="project2" />
如果我们使用availableTags2
它工作正常。但是如果我们使用 availableTags1
则不起作用。我也改成了 $("#project-name").val( ui.item.name );
。但它没有显示任何内容。
最佳答案
用值更改此名称
旧:
var availableTags1 = [
{"key": "1","name": "NAME 1"},{"key": "2","name": "NAME 2"},{"key": "3","name": "NAME 3"}
];
新:
var availableTags1 = [
{ "key": "1", "value": "NAME 1" }, { "key": "2", "value": "NAME 2" }, { "key": "3", "value": "NAME 3" }
];
select 当我们从列表中选择任何标签时调用事件调用
这是一个例子,用json处理,用ajax调用(api调用)
$('#selcloter').autocomplete({
source: function (request, response) {
$.ajax({
url: "url",
data: "{ 'inputdate': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.name,
value: item.name,
//this is custom tag, can give any name
keyvalue: item.key
}
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (event, ui) {
$(this).val(ui.item.value)
$('#HiddenFieldtosavekey').val(ui.item.KeyValue);
},
open: function () {
$(this).autocomplete("widget").css({
"width": 400
});
$(this).autocomplete('widget').zIndex(100002);
},
close: function () {
//$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
关于javascript - 如何使用 jquery 自动完成不同的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34332262/