materializecssのautocompleteのソートでハマった

materializecssのautocomplete

materializecssは、cssフレームワーク。
その中のサジェスト機能を実装できるautocompleteがある。

autocompleteの使い方

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
});

sortについて

先ほどのautocompleteの初期化の際に、サジェストに表示される順番のsortについて設定することができる。

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      sortFunction: function() {
        ...
      }
    });
});

デフォルトでは、以下の関数が使用されて、自動でソートされる。

// Sort function for sorting autocomplete results
function (a, b, inputString) {
  return a.indexOf(inputString) - b.indexOf(inputString);
}

ソートを無効にしたい時にハマった

ソートを無効にしたい場合、以下のように記述されており、falseをreturnすれば良いと思った。

To disable sorting and use the values as they appear in the data object, use a falsy value.

このように、falseを返すように設定したが、うまく動作しません。

うまく動作しない

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      sortFunction: function() {
        return false;
      }
    });
});

実際には、compareFunctionに従って指定する必要があった？ようで、比較に対して等しいということで0をreturnすることでソートを無効にすることができた。

ソートが無効になった

$(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
      sortFunction: function() {
        return 0;
      }
    });
});