Databases
StackOverflow2013
Postsdbo
POJquery autocomplete with multiple keywords, highlighting and partial matches
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery autocomplete with multiple keywords, highlighting and partial matches
    primarykey
    data
    text
    <p>I'm on the hunt for a JQuery autocomplete that will:</p> <ul> <li>Search partial matches</li> <li>Highlight all occurrences whereever they appear</li> <li>Allow multiple word</li> <li>Allow remote datasources (i.e. PHP filters database results based on querystring that dynamically updates with each keypress)</li> </ul> <p>So for example</p> <p>Search: "me wa home"</p> <p>Returns: "show <strong>me</strong> the <strong>wa</strong> y to go <strong>home</strong>"</p> <p>I'm having a terrible time trying to find something that can offer this, even though it is common expectation of a Google-style autocomplete.</p> <p>The monkeypatch of jquery ui autocomplete ( <a href="https://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results">jQueryUI: how can I custom-format the Autocomplete plug-in results?</a> ) comes close, but doesn't seem to offer dynamic remote datasources.</p> <p>I've also come close with the following script:</p> <pre><code>var termTemplate = "&lt;span class='ui-autocomplete-term'&gt;%s&lt;/span&gt;"; $("#f input").autocomplete({ source: "livesearch.php", open: function(e, ui) { var origKeyword = $("#f input").val(); var acData = $(this).data('autocomplete'); acData.menu.element.find('a').each(function() { var me = $(this); var regex = new RegExp(acData.term, "gi"); me.html(me.text().replace(regex, function(matched) { return termTemplate.replace('%s', matched); })); }); }, select: function(event, ui) { var keyword = $("#f input").val(); $("#f input").val(''); window.location.href = 'MYURLHERE?VARIABLE=' + ui.item.value; return false; }, focus: function(event, ui) { return false; } }); </code></pre> <p>However, it doesn't handle highlighting multiple words separated by a space.</p> <p>if anyone has any suggestions, I'd be hugely grateful.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USiltdev
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery autocomplete with multiple keywords, highlighting and partial matches
      1. USLmC
      1. VTFavorite
    2. VO
      singulars
      1. POJquery autocomplete with multiple keywords, highlighting and partial matches
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POJquery autocomplete with multiple keywords, highlighting and partial matches
      1. USXordal
      1. VTFavorite
    1. COUse a function for the source option to manually query the server. Look at step 4 here: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/ Note in step 5 that autocomplete passes the search items to `$_GET['term']`
      singulars
      1. POJquery autocomplete with multiple keywords, highlighting and partial matches
      1. USNal
    2. COYes, a dynamic remote source is definitely possible. Highlighting the individual words is harder, but not impossible with jQueryUI autocomplete
      singulars
      1. POJquery autocomplete with multiple keywords, highlighting and partial matches
      1. USAndrew Whitaker
    3. COThanks Nal. I've had a go at adding in the function you mentioned into code the supports multiple highlighting. However I can't get it working. Would you might having a look at my code in Answer 1?
      singulars
      1. POJquery autocomplete with multiple keywords, highlighting and partial matches
      1. USiltdev
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload