Autocomplete: Display data different from what is filled, and filling in multiple fields?

Question

Hello,

I'm using asp.NET MVC, and am looking at the JQuery autocomplete plugin for what I want to do. I need some extra functionality that I don't think it provides.

I have a page with two text fields, First and Last name. Ideally, when someone begins typing into either, I would like autocomplete to display both the first and last name of all matches. If one of these matches were selected, I would like only the appropriate (first/last) name to go into the current field, while the other field is also filled in with the appropriate name.

So the problems here are that A) I would like the suggestion text to be different from the value that would be filled into the current field, and B) I would like to update multiple fields from a single autocomplete. Does this make sense? It seems to be difficult to find information on this situation on the net. Thanks in advance for your time.

Answer 1

What you are looking for is a little unusual for a traditional auto-complete plug-in and the behavior would be somewhat unexpected from a usability standpoint... it could be confusing to some users since it breaks from the norms they are familiar with already.

Also, it is almost always a very bad idea to have user changes in one field result in automatic changes to other fields. Users don't always notice that the other field changed, and they don't always double check values for pre-populated fields, so this often results in increased data entry error rates.

Have you considered just having one field for the name at the UI and just using one auto complete? On the server side, you can split the contents for storage as separate fields.

Another technique you might consider is to have an optional "look me up" feature. Here you'd have a single field as described above. The user searches and if they select something it populates the rest of the form. Generally you'd hide or disable the rest of the form until the user either chooses from the lookup, or explicitly presses a "skip" button of some sort.

I've found this useful, especially if there are several fields you can pre-populate for the user when you look them up. It also has the advantage of having a much more intuitive user interface than the scenario you were describing in your question.

Answer 2

If you decide you really want to do this, this example will do what you want. You can use the result() method to add in the functionality you need.

$(document).ready(function(){

    var data = [ "John Doe","Jane Doe","Mike Smith" ];


    $("#firstname").autocomplete(data).result(function(event, item) {
            var rdata = item[0].split(" ");
            $("#firstname").val(rdata[0]);
            $("#lastname").val(rdata[1]);
    });

    $("#lastname").autocomplete(data).result(function(event, item) {
            var rdata = item[0].split(" ");
            $("#firstname").val(rdata[0]);
            $("#lastname").val(rdata[1]);
    });

});