Jquery-ui 自动完成无法正常工作答案

【问题标题】：Jquery-ui Auto complete not working properlyJquery-ui 自动完成无法正常工作
【发布时间】：2017-08-21 05:22:40
【问题描述】：

我正在尝试显示一个自动完成的文本框。我还尝试显示城市名称，并希望在选择一个城市时将城市的相应cityId 存储在另一个框中。自动完成框工作正常（我的意思是我正在获取城市名称列表）。但是当我选择一个城市时，它的名称没有显示在框中，但它显示了 id。我的代码如下。

 <div class="col-sm-10">
          <input type="text" name="txtCity"  placeholder="City" id="txtCity" class="form-control">
          <input type="text" name="txtCityId"  placeholder="City" id="txtCityId" class="form-control">
 </div>

<script type="text/javascript">
$(function() {
 $("#txtCity").autocomplete({
  source: 'getcitylist',
  select: function (event, ui) {
        $("#txtCity").html(ui.item.label); // display the selected text
       // $("#txtCityId").val(ui.item.value); // save selected id to hidden input
    }
 });
});
</script>

这是数据库函数：

 public function getCityList(){
            $term = Input::get('term');
            $cityList = CityModel::getCityNameAjax($term);
            foreach ($cityList  as $key=>$value) {  
                $data[$key]['label']=$value->cityName;
                $data[$key]['value']=$value->id;
            }
            echo json_encode($data);
        }

【问题讨论】：

这个jsfiddle.net/9R4cV/805 很适合我。
那不行。当您选择“始终”时，它不会在文本框中显示“始终”（标签），而是显示“1”（值）。我在代码中遇到的同样的问题

标签： jquery autocomplete

【解决方案1】：

您可以使用event.preventDefault() 阻止设置值的默认方法，或者您也可以返回false。

完整代码：

$( "#textCity" ).autocomplete({
    source: aTags,
    select: function (event, ui) {
        event.preventDefault(); //preventing default methods
        $("#textCity").val(ui.item.label); // display the selected text
        $("#textCityId").val(ui.item.value); // save selected id to hidden input
    }
});

工作演示链接： http://jsfiddle.net/9R4cV/806/

【讨论】：