New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Case-Insensitive keyword matching #7

Devtr0n opened this Issue Aug 3, 2016 · 5 comments


None yet
2 participants
Copy link

Devtr0n commented Aug 3, 2016

In case anybody cares, I was able to easily implement "case insensitive" search feature by simply changing one line of code.

I changed this:
( $combobox_case_sensitive==='no' && tablo_suggestions[index_table][i].substring(0,value_to_search.length).toUpperCase() === value_to_search.toUpperCase() )

to instead make use of "contains", like this:
if (tablo_suggestions[index_table][i].toLowerCase().indexOf(value_to_search.toLowerCase()) >= 0)

I also went a step further and limited my output results to only 6 suggestions max, like so:
if ( tablo_suggestions[index_table][i].toLowerCase().indexOf(value_to_search.toLowerCase()) >= 0 && counter < 6)

So now, I am able to apply my keyword to search for a pattern within the entire string, not just from the beginning of the string. This replicates the standard jQuery Autocomplete behaviour, in case you are migrating to this accessible version from that instead.

Here it is in action, in full glory:

@nico3333fr nico3333fr self-assigned this Aug 4, 2016


This comment has been minimized.

Copy link

nico3333fr commented Aug 4, 2016

Hi @Devtr0n !

Yes, I'm interested :)

For the case insensitive, it was already available, see data-combobox-case-sensitive="yes/no" in the doc

But for the search within the entire string, that is a really good idea, I'm going to add it based on your suggestion (as an option). Good point too for the search result limit.

One question : how did you implement the "See more results" option? Is there an URL I can test it?

Thanks a lot for your suggestions and work 👍


This comment has been minimized.

Copy link

Devtr0n commented Aug 11, 2016


In the $body.on event listener, I appended the "See more results..." as the last suggestion, like so:

//add "See more results..." option (as the last suggestion item)
var lastSuggestion = 'See more results...';                    
$suggestions.append('<div id="suggestion-' + index_table + '-' + counter + '" class="js-suggestion ' + $combobox_prefix_class + 'suggestion" tabindex="-1" role="option">' + lastSuggestion + '</div>');

and then in my click handler, I handle it, like so

    //find item by keyword entered by the user
    var result = suggestions.filter(function(s) {
        return s.Title == keywordSelected; //find exact match
    //Perform "deep search" based on user input keyword (No Suggestion matches were found)
    if (result.length == 0) {
        //if user selected 'See more results...' from the Suggestions list, then use the original user entered keyword
        if (keywordSelected == lastSuggestion) {
            keywordSelected = $("#globalSearch").attr('data-lastval'); //last value entered by user
        //create url to redirect to search results page, with user entered keyword
        var _searchUrl = '../Search/SearchResults?searchKeyword=' + keywordSelected;
    document.location.href = _searchUrl; //re-direct to search results page

^ This basically checks if the user selected "See more results...", and if that's true, it uses the "data-lastval" attribute, to append to the search URL.

My search page will handle the keyword submission to the data controller/database.


This comment has been minimized.

Copy link

Devtr0n commented Aug 11, 2016

Also, the reason we limit our auto-suggestions to 6, is because we can get 100's of suggestions in certain situations. Out of the box, the jQuery AutoComplete UI control has a limit size on it.

For instance, if someone were looking for "community" as in "community college" they would see several hundred, like so (see that scroll bar?? ) :



This comment has been minimized.

Copy link

Devtr0n commented Aug 12, 2016

I also use JSON to load my suggestions list, instead of raw HTML/option tags.
** I have over 4500+ suggestion items in my JSON list in my project.

Here is my HTML:

<div class="ui-widget">        
    <input type="text" name="globalSearch" id="globalSearch" class="js-combobox" list="suggestionsList" data-combobox-prefix-class="combobox" placeholder="Search My Website" />
    <datalist id="suggestionsList"></datalist>

Here is my document ready function:

$(document).ready(function() {

//some sample data, just for example purposes
var suggestions = [{ "Id": "11-1011.00", "Title": "Chief Executives", "Type": "occupation" }, { "Id": "11-1011.03", "Title": "Chief Sustainability Officers", "Type": "occupation" }, { "Id": "11-1021.00", "Title": "General and Operations Managers", "Type": "occupation" }, { "Id": "11-1031.00", "Title": "Legislators", "Type": "occupation" }, { "Id": "11-2011.00", "Title": "Advertising and Promotions Managers", "Type": "occupation" }, { "Id": "11-2011.01", "Title": "Green Marketers", "Type": "occupation" }, { "Id": "11-2021.00", "Title": "Marketing Managers", "Type": "occupation" }, { "Id": "11-2022.00", "Title": "Sales Managers", "Type": "occupation" },  { "Id": "9814", "Title": "Young Harris College", "Type": "school" }, { "Id": "9815", "Title": "ITT Technical Institute", "Type": "school" }];

    var dataList = document.getElementById('suggestionsList');

    // Loop over the Suggestions array.
    suggestions.forEach(function(item) {
        // Create a new <option> element.
        var option = document.createElement('option');
        // Set the value using the item in the JSON array.
        option.value = item.Title;
        // Add the <option> element to the <datalist>.


This comment has been minimized.

Copy link

nico3333fr commented Aug 20, 2016

Hi @Devtr0n ,

it took some time (not much free time), but I added the options to the plugin :)

  • Added options for limiting number of results,
  • Added searching in suggestions containing/beginning text
  • “see more” text option
  • etc.

The only one I didn't set up (too specific) is the JSON loading. However, it is really interesting seeing other ideas.

The doc is updated:

Thanks a lot for all your suggestions, really appreciated.
Best regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment