CODEWITHSUNDEEP
javascriptjqueryjquery-ui-autocomplete
J0ANMM
J0ANMM

Reputation: 8531

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 tried the suggestions from here and here, but without success.

This is my code:

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

How could this be done?

Upvotes: 1

Views: 3631

Answers (1)

Alessandro
Alessandro

Reputation: 4472

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

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) Search the cities that contains the user's input:

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

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

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

Please see following snippet:

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.

  • If you digit in textbox "Mil" or "Ale" and just press the tab, the autocomplete will be filled with the single result starting with "Mil" or "Ale".
  • Instead, when you digit "Pis" the autocomplete will be cleared.

I hope it was clear, bye.

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

Upvotes: 2

Related Questions