title: Select "intelligently" from a drop down list
body: <p><strong>Trying an advanced search on the datalist</strong></p>
  
  <p>I have created a datalist like so: </p>
  
  <pre><code>&lt;datalist id=attractions&gt;
       &lt;option value="India Agra Taj Mahal"&gt;
       &lt;option value="India Delhi Red Fort"&gt;
       &lt;option value="India Agra Red Fort"&gt;
       &lt;option value="India Jaipur Jal Mahal"&gt;
       &lt;option value="India Mathura Sheesh Mahal "&gt;
  &lt;/datalist&gt;
  &lt;input id =places type=text list=attractions&gt;
  </code></pre>
  
  <p>So when I type <code>India Agra</code> in the textbox the option values which will start with <code>India Agra</code> ie only two (1st and 3rd)</p>
  
  <p>but if I type <code>India Mahal</code> 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) </p>
  
  <p>Is there some  way to enable such a search more contextually rather than by the exact terms. </p>
  
  <p><strong>What else can be thought of</strong> </p>
  
  <p>If I search <code>Indiaahal</code> 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" </p>
  
  <p><strong>I believe:</strong> </p>
  
  <ol>
  <li>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. </li>
  <li>The solution given by @yash Shukla is close to what I was looking for. </li>
  </ol>