自动完成：如果未选择任何值，如何自动获取焦点值

Question

从 the comment in this question 开始，我了解了如何在列表中没有元素被 selected 时将自动完成字段设置为空。

我要实现的是，当用户不 select 自动完成列表中的任何元素并切换到下一个字段时，应该发生以下情况之一：

如果自动完成列表中至少显示了一个元素，则自动获取该列表的第一个元素。在下面的屏幕截图中，如果用户在没有 selecting 任何元素的情况下转到另一个字段，Mannheim 应该会自动 selected。
如果没有显示任何元素，请再次将字段清空。

如果尝试了 here and here 的建议，但没有成功。

这是我的代码：

var cities = //function that provides a list of cities depending on the input string (edited to clarify)

$('.autocomplete-city').autocomplete({
    source: function (request, response) {
       response($.map(cities( request.term ), function (value, key) {
            return {
                label: value.label,
                value: value.value
            }
        }));
    },

    // manage what happens if user does not click any option from autocomplete
    change: function(event, ui){
        if (ui.item == null){
            if ( list_from_autocomplete == null ){ // I tried here several possibilities but none seem to work
                $(this).val('');
                $(this).focus();
            } else {
                $(this).val( first_item_in_list ); // Despite the existing questions, I could not make it work...
            }
        }
    },
    minLength: 2,
    autoFocus: true,
});

这是怎么做到的？

Answer 1

您可以搜索包含用户输入的所有城市，如果您只得到一个结果，请将其放入自动完成。

1) 因此，在更改事件中，您可以检查用户是否选择了一个项目：

change: function(event, ui){
    if(ui.item){
      //user select an item
    }
    else{
      //here let's try to set the autocomplete
    }

2) 搜索包含用户输入的城市：

var result = cities.filter(function( obj ) {
    return obj.label.indexOf(searched);
  });

3) 最后，如果您只得到一个结果，请使用该值设置自动完成：

if(result.length==1){
    $(this).val(result[0].label);
}

请参阅以下代码段：

var cities = [
  {"label":"Alessandria","id":"AL"},
  {"label":"Milano","id":"MI"},
  {"label":"Pisa","id":"PI"},
  {"label":"Pistoia","id":"PT"}
];

$(".autocomplete-city").autocomplete({
  source: cities,
  select: function(event, ui){
    if(ui.item){
      console.log('select', ui.item.label);
      return ui.item.label;
    }
    else{
      console.log('select with null value');
    }
  },
  change: function(event, ui){
    var searched = this.value;
    console.log("Searched: " + searched);
    if(ui.item){
      console.log('change', ui.item.id);
    }
    else{
      console.log('change with null value');
      var result = cities.filter(function( obj ) {
        return obj.label.toLowerCase().indexOf(searched.toLowerCase()) !== -1;
      });
      if(result.length>0){
        $(this).val(result[0].label);
      }
      else{
        //clear the autocomplete
        $(this).val("");
      }
    }
  }
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<input class="autocomplete-city"/>

在上面的例子中有以下城市：亚历山德里亚、米兰、比萨、皮斯托亚。

如果您在文本框 "Mil" 或 "Ale" 中输入数字并按下制表符，自动完成将填充以 "Mil" 或 "Ale" 开头的单个结果。
相反，当您输入 "Pis" 时，自动完成功能将被清除。

我希望已经清楚了，再见。

更新： 为了在用户离开自动完成而不选择任何城市时获得第一个结果，您可以检查 result.length>0 并将结果中的第一个值设置为自动完成：

var result = cities.filter(function( obj ) {
        return obj.label.toLowerCase().indexOf(searched.toLowerCase()) !== -1;
      });
      if(result.length>0){
        $(this).val(result[0].label);
      }
      else{
        //clear the autocomplete
        $(this).val("");
      }

自动完成：如果未选择任何值，如何自动获取焦点值

Autocomplete: how to get automatically value on focus if no values selected

javascript

jquery

jquery-ui-autocomplete