Jquery UI autocomplete selecting closest match

Question

I have an input field connected with Jquery ui autocomplete. This field is used for user to enter catalog number of device. He can do it in two ways:

• First. By writing it by hand and select one from autocomplete list
• or use barcode scanner for entering the catalog number

Unfortunatelly Barcodes not always gives same answer as its printed on the device eq. There is printed :

• 100-ENT/A but barcode returns 100-ENT/OA

• printed 156-CNR/B and barcode returns 156-CNR B

So I want to select closest match from autocomplete.

I know I can use this plugin for selecting the first one: CLICK but how to make it select the closest match?

At this moment I'm stuck at clean code for loading autocomplete:

function GetNames() {
    var availableTags;
    var jsonData
    $.ajax({
        url: "/DeviceInstance/GetDeviceNames",
        type: "GET",
        dataType: "json",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            availableTags = data;
            $(".deviceCatalog").autocomplete({
                source: availableTags,
                change: function (event, ui) 
                { 
                    viewModel.DeviceTemp(ui.item.id);
                } 
            });
        }
    })

};

Answer 1

You'll need to think in the direction of algorithms that are used for correcting spelling mistakes. For example, these correct Yuor to Your. Some algorithms such as the string-edit distance tells you which of two strings is closer to a third, for example:

The edit distance between Yuor and Your is 2 because you need to change two letters u to o and o to u. The edit distance between Yuor and York is 2 because you need to remove o, and then add k (but you can consider that adding or deleting is more expensive, and so count the removal of o as 2 points).

This means that Your is closer to Yuor than York is. So your algorithm would choose Your rather than York as a correction for Yuor.

I think this is what you you'll need to dig into: http://en.wikipedia.org/wiki/Edit_distance

There is also famous dynamic programming algorithms that address this issue, not very complicated (they are not really "software programming"). See http://en.wikipedia.org/wiki/Levenshtein_distance

Answer 2

you will want to build a method that will be able to identify your closest match, once you have that depending on the desired functionality you should call that method on one of the auto complete events. looks like you will want to call it on open event so that you can pre-select the "best match" for the user then let them pick from there.

hope this helps.

if you want to set up a jsbin and include the method for picking the correct one im happy to help a little more if needed