Question

我正在尝试显示自动完整文本框。我也试图显示城市名称，并希望在选择一个城市的同时将相应的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);
        }

Answer 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/

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

1 个答案: