Default jquery autocomplete search excluding specific characters, is it possible?

Question

Do you know if it possible to customize the Autocomplete Jquery, excluding some specific characters in the search engine, assuming that data source are not loaded via ajax but previously loaded and managed client-side.

var club_ajax_success = function (data) {
  $("#sm_autosearch_clubteam").autocomplete({
    source: data,
    select: club_autocomplete_select
  });
  $('#sm_autosearch_clubteam').prop('disabled', '').prop('placeholder', 'Zoek een club');
};

I deal with team names and someof them are written like this

• H.M.S.
• L.A. Dream
• N.Y. Invaders

I would like that the search modules could be able to manage those teams in the results even if I look for strings like HMS, or LA Dream, or NY, instead of filling the characters with dots. Does anybody has some suggestion?

Thanks in advance

Answer 1

There's a few things you could do here. The best thing to do would probably be to just run your source search twice, so when the user inputs a value, you first run a lookup against your values for a direct match;

User enters - HMS
Source returns - H.M.S.

No match

So after this, you'd want to try and match what the user has entered against a formatted source value;

User enters - HMS
Source returns formatted string (remove periods) - HMS

Match 
Output original source value

The other thing you might want to consider is that users often don't strongly type their searches;

User enters - hms
Source returns formatted string (remove periods) - HMS

No match

So you'd also need to force both strings to lowercase before trying to match anything.

Assuming your source and search methods are done in the back end, this is really easy to do. Use AJAX to grab your source, and if it's small enough you could even store that on the client machine for future use, then just do your string manipulation in code behind and pass back a source model.

I'm kind of assuming also that you might want to do this with pure JQuery, in which case I'd ask to see how you're getting the source and will edit this.

A really basic example of this in C# ASP.NET MVC would look a little like this;

Script:

$(document).ready(function () {
        $("#searchTerm").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/SearchSites",
                    data: "{ 'searchTerm': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.value,
                                value: item.value,
                                id: item.id
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1,
            select: function (even, ui) {
                window.location.href = '/Till/Index/' + ui.item.id;
            }
        });
    });

Controller:

public JsonResult SearchSites(string searchTerm)
{
    var suggestedSites = db.Sites.Where(s => searchTerm == null || 
        s.Name.ToLower()
            .StartsWith(searchTerm.ToLower()))
            .Select(x => new { id = x.SiteUid_PK, value = x.Name })
        .Take(5).ToList();
    var result = Json(suggestedSites, JsonRequestBehavior.AllowGet);
    return result;
}

This would have to be adapated for whatever language you are using, but the logic would remain pretty much exactly the same, and you'd just have to add some extra string formatting to the controller method.