0

Trying an advanced search on the datalist

I have created a datalist like so: 

<datalist id=attractions>
     <option value="India Agra Taj Mahal">
     <option value="India Delhi Red Fort">
     <option value="India Agra Red Fort">
     <option value="India Jaipur Jal Mahal">
     <option value="India Mathura Sheesh Mahal ">
</datalist>
<input id =places type=text list=attractions>

So when I type India Agra in the textbox the option values which will start with India Agra ie only two (1st and 3rd)

but if I type India Mahal it will be unable to search for anything. I would want to be returned the answers: 1, 4 and 5. they contain all the two words in order (India and Mahal)

Is there some way to enable such a search more contextually rather than by the exact terms.

What else can be thought of

If I search Indiaahal then also it should give those places which has "India" and "ahal" contained in order. So it should show the outputs like both "India Agra Taj Mahal", "India Jaipur Jal Mahal" and "India Mathura Sheesh Mahal"

I believe:

  1. The solution proposed in the links below do not seem to correctly do what I want. My question is not about "contains" but more than just contains. It is about contains fragments at different locations.
  2. The solution given by @yash Shukla is close to what I was looking for.
Nishant Sah
  • 141
  • 3
  • 13
  • show your code and what you tried so far – לבני מלכה Jun 11 '18 at 06:29
  • 1
    You can use `String.prototype.startsWith()` https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith – Mamun Jun 11 '18 at 06:30
  • 1
    I think what you need is a fuzzy search logic. – Praveen Puglia Jun 11 '18 at 06:32
  • 1
    Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. – mplungjan Jun 11 '18 at 06:32
  • @Nina Scholz I was unable to get the functionality that I am looking for on that link... I have tried to improve the question. – Nishant Sah Jun 11 '18 at 09:24
  • @PraveenPuglia: That does open a lot of options. Shall look into those. – Nishant Sah Jun 11 '18 at 09:24
  • how would you go from `'Indiaahal'` to `'india'` and `'ahal'`? – Nina Scholz Jun 11 '18 at 09:41
  • I only gave an example it could be like someone does not know the exact key word and he is only guessing. What is achieved by the code given by Yash does my work perfectly but imagine not having to use a space as well. Or say one could type. It is the functionality that is available in Visual Studio code when we are looking for files. (using CTRL+P) I was looking to create something similar for my app. – Nishant Sah Jun 11 '18 at 10:44

1 Answers1

1

Suppose you have a datalist like below : 

<datalist id="locations">
  <option value="India taj mahal">
  <option value="India Qutub Minar">
  <option value="China gate">
</datalist>

Now you can select all option values and put them in an array like below :

var options = document.getElementById('locations').options;
var values = [];
for(var i=0; i<options.length; i++)
{
  values.push(options[i].value);
}

Now let's suppose your search term is India Minar, so you can build a search logic something like below :

var searchTerm = "India Minar";

var searchSplit = searchTerm.split(" ");

var availableSearches = [];

for(var i=0; i<values.length; i++) {
  for(var j=0; j<searchSplit.length; j++) {
    if(values[i].indexOf(searchSplit[j]) >= 0 && 
      availableSearches.indexOf(values[i]) < 0){
      availableSearches.push(values[i]);
    }
  }
}

console.log(availableSearches); 
//["India taj mahal", "India Qutub Minar"]

This logic will search text with both India and Minar in the collection. If this is not exactly you are looking for, you can easily tweak logic.

Yash Shukla
  • 32
  • 5