我有一个带有jquery-ui自动完成功能的输入。关于自动完成功能“选择”，我想将输入值更改为自动完成功能的所选项目。我必须这样做是因为我的数据结构与jquery-ui期望的数据结构不同。一切正常，但是当我尝试设置输入值时，没有任何变化，也没有出现任何错误。
这是我的代码：
HTML：
<input type="text" placeholder="from" name="location" id="search-form-location" class="inputAddon-field flex-shrinker flex-grower" value="London, United Kingdom">
JS：
$( "#search-form-location" ).autocomplete({
source: "/api/airports-autosuggest",
minLength: 3,
select: function( event, ui ) {
console.log(JSON.stringify(ui.item,0,4));
console.log($(this));
$(this).val(ui.item.PlaceName);
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
if (item.PlaceId===item.CityId){
return $( "<li>" )
.append( "<span class='placeName'>"+ item.PlaceName +"</span> <span class='placeCode'>(All airports)</span> <span class='countryName'> " + item.CountryName + "</span>" )
.appendTo( ul );
} else
return $( "<li>" )
.append( "<span class='placeName'>" + item.PlaceName + "</span> <span class='placeCode'>("+trump(item.PlaceId, "-sky" )+")</span> <span class='countryName'>" + item.CountryName + "</span> " )
.appendTo( ul );
};
当我从自动完成控制台中选择一个选项时，log（JSON.stringify（ui.item，0,4））打印出我期望的对象（例如下面），console.log（$（this））打印出正确的对象对象，但输入字段变为空白，仅显示占位符。如果在浏览器中检查它，我仍然会看到原始值attr：value =“英国伦敦”
ui.item对象：
{
"PlaceId": "LOND",
"PlaceName": "London",
"CountryId": "UK",
"RegionId": "",
"CityId": "LOND",
"CountryName": "United Kingdom"
}
默认select处理程序将覆盖您的自定义值。添加一个return false以防止事件处理逻辑传播给它：
select: function( event, ui ) {
console.log(JSON.stringify(ui.item,0,4));
console.log($(this));
$(this).val(ui.item.PlaceName);
return false;
}
http://jqueryui.com/autocomplete/中的小提琴示例：http : //jsfiddle.net/2qp708zo/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句