Ability to add data to the label that is not searchable

[daviegravy]

We have been working with your autocomplete library for quite some time now and we love it, but our need to include stylings in the label has grown to maintain consistency with the use of icons and stylings from our framework.

Is there a way to include text (preferably markup) that could be rendered to the list output but not searched upon? We've tried a multitude of hacky methods that have all failed us. String replacements, HTML entities, etc. all end up either not be rendered or still being searchable.

We want to be able to include icons from FontAwesome in the label as well as HTML markup tags to help facilitate the styling of the autocomplete list. Naturally, we thought about adding an additional parameter to the data components and call it display_label which would be used strictly for the render and still allow the label to searched upon but we wanted to see if you had a more cohesive or natural method since I suspect this would dork up the marking feature. At least for us, the marking is not necessary if we could score a win with non-searchable characters in the label.

Thank you for your time!

[daviegravy]

In case anyone stumbles upon this and is in similar need.

So we were able to overcome these challenges by overloading the custom data function so that we could match the search term against components of the JSON string that we designate instead of comparing it to the label as a whole. Then we created a mechanism to omit data from being marked in the list output by adding in 2 custom tags <ignorepre> and <ignorepost>. Then we modified the ITEM static method/property in the js source to extract and replace our ignored data with empty string, mark the now clean string, then append the ignored back for display. This prevents the autocomplete marking from highlighting and breaking the list display on markup that contains text in the search string (class is a big one in higher ed) while still displaying the ignored data back into the rendering of the list item. It allows us to display these nice font awesome icons in with the list items like so

Here's the modified ITEM static method/property that accomplishes the ignored text substitution and overloading the displayed list item:

`_.ITEM = function (text, input) {

var ignorePrepend = input === '' ? '' : text.label.match(/<ignorepre>(.*?)<\/ignorepre>/);
    if (ignorePrepend) {
       ignorePrepend = ignorePrepend[1];
} else {
       ignorePrepend = '';
}

    var ignorePost = input === '' ? '' : text.label.match(/<ignorepost>(.*?)<\/ignorepost>/);
    if (ignorePost) {
       ignorePost = ignorePost[1];
} else {
       ignorePost = '';
}

    var cleanString = input === '' ? '' : text.label.replace(/<ignorepre>(.*?)<\/ignorepre>/, '');
cleanString = input === '' ? '' : cleanString.replace(/<ignorepost>(.*?)<\/ignorepost>/, '');

    text.label = cleanString;

var html = input === '' ? text : text.replace(RegExp($.regExpEscape(input.trim()), "gi"), "<mark>$&</mark>");

html = input === '' ? text : ignorePrepend + html + ignorePost;

return $.create("li", {
    innerHTML: html,
    "aria-selected": "false"
});

};`