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

Closed
Devtr0n opened this Issue Aug 3, 2016 · 5 comments

Comments

Projects
None yet
2 participants
@Devtr0n
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:
image

@nico3333fr nico3333fr self-assigned this Aug 4, 2016

@nico3333fr

This comment has been minimized.

Copy link
Owner

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 http://a11y.nicolas-hoffmann.net/autocomplet-list/#plugin-options

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 👍

@Devtr0n

This comment has been minimized.

Copy link

Devtr0n commented Aug 11, 2016

@nico3333fr

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.

@Devtr0n

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?? ) :

image

@Devtr0n

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>
</div>

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');
    suggestions.sort;

    // 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>.
        dataList.appendChild(option);
    });

});
@nico3333fr

This comment has been minimized.

Copy link
Owner

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: http://a11y.nicolas-hoffmann.net/autocomplet-list/

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

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