javascript - Jquery .val() 不会更改 ui-autocomplete 选择处理程序上的任何内容

Question

这个问题已经有答案了:

jQuery autocomplete selection event (3 个回答)

已关闭 7 年前。

我有一个带有 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 );
};

当我从自动完成中选择一个选项时 console.log(JSON.stringify(ui.item,0,4)) 打印出我期望的对象(例如下面)，console.log($(this))打印正确的对象，但输入字段变为空白并仅显示占位符。如果我在浏览器中检查它，我仍然会看到原始值 attr: value="London, United Kingdom"

ui.item 对象:

 {
    "PlaceId": "LOND",
    "PlaceName": "London",
    "CountryId": "UK",
    "RegionId": "",
    "CityId": "LOND",
    "CountryName": "United Kingdom"
}

Answer 1

默认的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/ 的 fiddle 示例: http://jsfiddle.net/2qp708zo/