如何停止以排序顺序显示元素的 Bootstrap-3-Typeahead 下拉列表

Question

I'm using Bootstrap-3-Typeahead

Is there a way to avoid the dropdown data getting sorted in natural order ?

This will show all the data in the source in the drop down list in the onFocus event. So the problem is it will only show limited number of elements with the natural sorted order though I don't want them to be.

How can I avoid them getting sorted.

$('#device').tagsinput({
      typeahead: {
        source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo','Amstedrdam', 'Washidngton', 'Syddney', 'Bedijing', 'Caidro','Amzstderdam', 'Washidnzgton', 'Sydzdney', 'Beijzding', 'Caidzro'],
        autoSelect: false,
        showHintOnFocus : true,
        minLength : 0
      }
});

Answer 1

The problem is not in the Typeahead plug-in , but in the second bootstrap-tagsinput plug-in. Unfortunately you can not solve it without editing the source.

Take a look to this JSFiddle

How you can read from source of the bootstrap-tagsinput.js at line 310:

sorter: function (texts) {
            return texts.sort();
          },

The sorter option is provided by the bootstrap-tagsinput plug-in to the Typeahead plug-in and since the plug-in is executed in a immediately invoked function expression you can't overwrite the sorter method. You should fork the plug-in and change the sorter option:

sorter: function (texts) {

          var sorter = typeahead.sorter || function (items) { return items.sort(); }
          return sorter(texts);
        },

So your plugin initialization will be:

$('#ppp').tagsinput({
    typeahead: {
      source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'Amstedrdam', 'Washidngton', 'Syddney', 'Bedijing', 'Caidro', 'Amzstderdam', 'Washidnzgton', 'Sydzdney', 'Beijzding', 'Caidzro'],
      sorter: function (texts) {
        return texts;
      }
    }
  });

...once you have done this then it will work

Answer 2

The library provides a way to override the sorter. You could simply use that to override the default sorter and return the list as-is:

sorter: function (items) { 
           return items; 
        },

Also, here is the default sorter implementation.