Autocomplete doesn't work with all letters

[fozix]

Hi,

I'm using the keyboard latest version, with the autocomplete extension.

It work good except for a customized rendering of the select menu.

Here is my code :

$("#newPhoneCode")
  .keyboard()
  .autocomplete({
    close: function(event, ui) {
      tempList = []; //re-init important!
    },
    search: function(event, ui) {
      var inputStr = $(event.target).val();
      _.each($scope.countriesWithPhoneCode, function(elm) {
        if (
          elm.country &&
          elm.country.toUpperCase().indexOf(inputStr.toUpperCase()) != -1
        ) {
          tempList.push(elm);
        }
      });
    },
    source: tempList,
    minLength: 1
  })
  .addAutocomplete({
    // add autocomplete window positioning
    // options here (using position utility)
    position: {
      of: "#newPhoneCode",
      my: "left bottom",
      at: "left top"
    }
  })
  .data("ui-autocomplete")._renderItem = function(ul, item) {
  return jQuery("<li>")
    .attr("data-value", item.value)
    .append(item.phoneCode + " | " + item.country)
    .appendTo(ul);
};

When I tape "O" for exemple, it searchs the countries containing "O" letter. But when I use other letters, for exemple "A" or "U", the search function works well, it goes inside render function but the autocomplete doesn't show.

Do you have any idea why i'm having this behavior ?

regards.

[Mottie]

Hi @fozix!

Without a working demo, I don't think I can determine the exact cause of this issue. Also, I have the following questions:

• Does the same problem occur when the keyboard plugin isn't been initialized?
• Are you handling locales and diacritics?... what happens if someone types in ñ, will España show in the results?
• Why is the tempList being used as a source? It gets cleared on close, maybe that's why you're not getting any results?

[fozix]

Hi @Mottie,

tempList is cleared to have items that correpond to the search after each search.

Here is a demo with the noticed problem.

https://jsfiddle.net/fozix/heLmbmzf/5/

You can try to search with capital letter "A" and after that with capital letter "O".

Thanks for your help.

regards.

[Mottie]

The tempList method isn't working as expected. I could not get the code to work even without initializing the keyboard plugin. Anyway, I think it would be best to use the built-in methods that autocomplete provides. Here is a demo of it working.

var countriesWithPhoneCode = [
  {
    code: "UN",
    country: "UNITED NATIONS",
    phoneCode: "001",
    countryFR: null,
    countryDE: null
  },
  {
    code: "BQ",
    country: "Bonaire, St Eustatius and Saba",
    phoneCode: "00599",
    countryFR: "Bonaire, St Eustatius and Saba",
    countryDE: "Bonaire, St Eustatius and Saba"
  },
  {
    code: "CW",
    country: "Curacao",
    phoneCode: "00599",
    countryFR: "Curacao",
    countryDE: "Curacao"
  },
  {
    code: "CD",
    country: "CONGO",
    phoneCode: "00242",
    countryFR: "CONGO DEMOCRATIQUE REP",
    countryDE: "KONGO DEMOKRATISCHE REPUBLIK"
  },
  {
    code: "ME",
    country: "Montenegro",
    phoneCode: "00382",
    countryFR: "Montenegro",
    countryDE: "Montenegro"
  },
  {
    code: "SS",
    country: "South Sudan",
    phoneCode: "00211",
    countryFR: "South Sudan",
    countryDE: "South Sudan"
  },
  {
    code: "AS",
    country: "AMERICAN SAMOA",
    phoneCode: "00684",
    countryFR: null,
    countryDE: null
  },
  {
    code: "AD",
    country: "ANDORRA",
    phoneCode: "00376",
    countryFR: null,
    countryDE: null
  },
  {
    code: "AO",
    country: "Angola",
    phoneCode: "00244",
    countryFR: "Angola",
    countryDE: "Angola"
  },
  {
    code: "BB",
    country: "Barbados",
    phoneCode: "001246",
    countryFR: "Barbados",
    countryDE: "Barbados"
  },
  {
    code: "BO",
    country: "Bolivia",
    phoneCode: "00591",
    countryFR: "Bolivie",
    countryDE: "Bolivien"
  }
];

var list = countriesWithPhoneCode.map(function(elm, index) {
  return Object.assign({}, elm, {
    label: elm.phoneCode + " | " + elm.country,
    value: index
  });
});

$("#keyboard")
  .keyboard()
  .autocomplete({
    source: list,
    minLength: 1
  })
  .addAutocomplete({
    // add autocomplete window positioning
    // options here (using position utility)
    position: {
      of: "#keyboard",
      my: "left bottom",
      at: "left top"
    }
  });

[fozix]

Thats just perfect. Simple, small and working :)

Thanks a lot Rob.