Angular material autocomplete search anywhere in string?

Question

https://material.angularjs.org/latest/#/demo/material.components.autocomplete

Please can someone tell me how to make autocomplete (Angular material) to search string not only at the beginning of words, but anywhere within the words.

For example the word Alabama: Works when you type "Ala", but does not work when you type "bama". How do I make it to work when I type "bama"?

I know I can use a third party directive such as Angucomplete Alt: http://ghiden.github.io/angucomplete-alt/ but I think Angular material should have this option?

Elate

Answer 1

The demo only matches characters at the beginning of the result due to specifying the caret flag, ie: md-highlight-flags="^i"

To allow autocomplete to find any matching characters you should use the global flag, ie: md-highlight-flags="gi"

You will also need to change the state.value.indexOf(lowercaseQuery) === 0 line in the filterFn function to state.value.indexOf(lowercaseQuery) !== -1

Check this codepen for a working example: http://codepen.io/DevVersion/pen/KrOYoG

Forthright

Do you know if Angular 2 has this md-highlight-flag? – Pages

Answer 2

This is a function from the original md-autocomplete:

function createFilterFor(query) {
  var lowercaseQuery = angular.lowercase(query);
  return function filterFn(state) {
    return (state.value.indexOf(lowercaseQuery) === 0);
  };
}

Please try changing the condition a little bit, like this:

    return (state.value.indexOf(lowercaseQuery) >= 0);

and it should work the way you want.

Escargot

how can you do that without changing the original source code? – Hege