自动完成:如果未选择任何值，如何自动获取焦点值 [英] Autocomplete: how to get automatically value on focus if no values selected

问题描述

在此问题中的评论中，我已经看到了如何将自动完成字段设置为空(如果没有来自列表已被选中.

From the comment in this question, I've seen how to set an autocomplete field to empty if no element from the list has been selected.

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

What I am trying to implement is that when a user does not select any element from the autocomplete list and switches to the next field, one of the following should happen:

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

• If there was at least on element displayed in the autocomplete list, take automatically the first element of that list. In the screenshot below, Mannheim should be automatically selected if the user goes to another field without selecting any element.

如果未显示任何元素，请将该字段再次清空.

If no element was displayed, make the field empty again.

如果尝试了此处和

If tried the suggestions from here and here, but without success.

这是我的代码:

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,
});

这怎么办?

推荐答案

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

You could search all the cities that contains the user input and if you get only one result, put it in the autocomplete.

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

1) So, in the change event you could check if user selected an item:

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

2)搜索包含用户输入内容的城市:

2) Search the cities that contains the user's input:

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

3)最后，如果仅得到一个结果，请使用该值设置自动完成功能:

3) Finally, if you get just one result, set the autocomplete with that value:

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

在上面的示例中，有以下城市:亚历山德里亚，米兰，比萨，皮斯托亚.

In the above example there are following cities: Alessandria, Milano, Pisa, Pistoia.

• 如果您在文本框"Mil"或"Ale"中输入数字，然后按标签，则自动填充将填充以"Mil"或"Ale"开头的单个结果.
• 相反，当您输入"Pis"时，自动完成功能将被清除.

我希望这很清楚，再见.

I hope it was clear, bye.

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

Updated: In order to get the first result when user leaves the autocomplete without selecting any city, you could check result.length>0 and set the first value from result in to the autocomplete:

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("");
      }

这篇关于自动完成:如果未选择任何值，如何自动获取焦点值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！