2

EDIT: I did more research on datalist and it seems that its matching behavior is not customizable. I decided to ditch datalist and made my own drop down list and autocomplete plugin.

I have a input datalist like this

<input list="Country" />
    <datalist id="Country">
        <option value="United States of America"/>  
    </datalist>

At the moment, the datalist will only show "United States of America" if the user types in the country name in order of the datalist option, ie. United states, states of, etc.

I want the datalist to show "United States of America" even if the user types in the name not in order, ie. United America, America States.

In PHP and MySQL, I can split the input into array of each individual word, and use LIKE %..% clause to query what I want.

How do I achieve that with Jquery or Javascript?

J13t0u
  • 811
  • 1
  • 8
  • 19
  • this helps you: https://stackoverflow.com/questions/21727456/jquery-value-match-regex – Mojtaba Jul 17 '17 at 17:30
  • you may take a look to [Use HTML5 (datalist) autocomplete with 'contains' approach, not just 'starts with'](https://stackoverflow.com/questions/29154877/use-html5-datalist-autocomplete-with-contains-approach-not-just-starts-wit/32394157#32394157) – gaetanoM Jul 17 '17 at 17:45
  • @gaetanoM I read it, but the question and answers are for another problem which has been "fixed" by chrome. – J13t0u Jul 17 '17 at 20:16
  • @Mojtaba I can't find a way to implement regex into input and datalist. – J13t0u Jul 17 '17 at 20:17

1 Answers1

0

Use regex to check. Var userTypeRegex = new Regex( input.val().split(' ').join('|'));

And then check for each option value with above regex, if test and show else hide

Yogen Darji
  • 3,230
  • 16
  • 31
  • I can't find a way to implement regex into input and datalist. – J13t0u Jul 17 '17 at 20:17
  • Also, here is some very amateur regex for this scenario. It can match 1, 2, 3 or all 4 words in any order. One drawback is I didn't implement a way to check against spelling errors or duplicates. But here you go: `/^(united|states|of|america)\s?(united|states|of|america)?\s?(united|states|of|america)?\s?(united|states|of|america)?/i` – Aaron Eveleth Jul 17 '17 at 22:59
  • I see you're having trouble implementing. Here is how I would implement it: `jQuery(function($){ $('#input_field_where_user_enters_search_query').on('change', function(){ if($(this).val().match(/^(united|states|of|america)\s?(united|states|of|america)?\s‌​?(united|states|of|a‌​merica)?\s?(united|s‌​tates|of|america)?/i)) { // execute what you want here when this users search is a match } }); }); Edit: Where you execute code, you will most likely need to loop through your options(currently only 1) to associate the match with the option that holds that value. – Aaron Eveleth Jul 17 '17 at 23:17
  • @AaronEveleth Hi, thanks for the help. I did more research on datalist and it seems that its matching behavior is not customizable. I decided to ditch datalist and made my own drop down list and autocomplete plugin. – J13t0u Jul 18 '17 at 13:46
  • @J13t0u Glad you're figuring it out. Sometimes starting over is necessary. My suggestion is don't write your own regex if you don't ABSOLUTELY have to. There are several search plugins. The second and third seem fairly easy to implement in this list of [search plugins](https://www.sitepoint.com/14-jquery-live-search-plugins/). – Aaron Eveleth Jul 18 '17 at 17:27