Question

从the comment in this question开始，我已经看到如果没有选择列表中的元素，如何将自动填充字段设置为空。

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

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

如果尝试了here和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("");
      }

自动填充：如果未选择任何值，如何自动获得焦点值

1 个答案: