Keep searchfield-value after selection when using jquery autocomplete plugin

Question

I'm using Jörn Zaefferers autocomplete plugin for jQuery to enable a live search field, which is working great. The user input gets sent to a search service, that returns formatted results in Json format. When a result gets chosen, the values are entered into a separate table.

What I'm having trouble with is: After a user selects a search result from the drop-down, I don't want the search (parameters entered by the user) to be overwritten by the result. Which is the default behaviour.

I'm looking for an option that I can use to disable this, If it doen't exist though, I may have to look for a workaround / different plugin.

Here is my current usage of the autocomplete plugin with options:

$('#searchInput').autocomplete('searchUrl',
    {
        dataType: 'json',
        parse: function(data) {
            //logic to parse search results that are returned from search
            return datarows;
        },
        formatItem: function(row, i, max) {
            return row.Description;
        },
        width: 500,
        highlight: false,
        multiple: false,
        minChars: 2,
        delay: 800,
        selectFirst: false,
        autoFill: false,
        cacheLength: 10 
    })
    .result(function(event, item) {
        //logic to handle item chosen by the user
    });

Answer 1

What you want is not an autocomplete function, therefore an autocomplete plugin won't work. You have to modify the plugin so that it doesn't overwrite the result. I'm looking at it to see what changes you need to make and will add my proposed solution shortly.

---

Something came up at work, so I have to make this quick.

In the plugin, the input value is modified via the $input.val() function. When an argument is passed to it, like this:

$input.val('test')

The input's contents change, in this case to "test". You have to get rid of those lines. Note that calling $input.val() only returns the value without changing it so you want to leave those lines alone.

A couple I found:

On line 233, comment

$input.val(v);

On line 297, comment

$input.val($input.val() + sValue.substring(lastWord(previousValue).length));

There are more for sure. From what I have seen I would expect to find at least one in the function that hides the menu. Use the editor's search function.

This may or may not break the plugin, you'll have to start by commenting out those lines and then debug it.

I hope I was helpful enough, good luck :)