CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-autocompletejquery-ui-autocomplete
Maxim Zaslavsky
Maxim Zaslavsky

Reputation: 18065

jQuery UI Autocomplete dividing terms into separate characters, not words

I'm writing an ASP.NET MVC site where I'm trying to implement an autocomplete function using the jQuery UI autocomplete feature.

Here's how my page is setup:

I have a textbox with id TagInput. Next, I have the following inline Javascript code:

$().ready(function () {
            bindAutoTagComplete('#TagInput');
        });

In addition to referencing the jQuery and jQuery UI libraries on that page, I also reference this external Javascript code:

function bindAutoTagComplete(item, otherRootDomain)
{
var url = (otherRootDomain || "") + "/tags/ajaxList";
        function split( val ) {
            return val.split(' ');
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

        $(item).autocomplete({
            source: function( request, response ) {
                $.getJSON(url, {
                    term: extractLast( request.term )
                }, response );
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
    }

Everything works fine, except that the AJAX result with tag names is divided into single characters, not words. For example, if I have two tags "foo" and "bar" that are returned, the autocomplete list that pops up lists:

instead of:

I've debugged the code, but haven't found what is causing this incorrect division. Any ideas? Thanks in advance.

UPDATE: Here's a sample of what's currently being returned by the server in that AJAX request:

"foo bar some-other-tag"

Upvotes: 2

Views: 1461

Answers (2)

Maxim Zaslavsky
Maxim Zaslavsky

Reputation: 18065

Thanks for your tips, guys! I found the problem; in fact, there were two:

  1. My application was returning the AJAX result in incorrect format. Based on the jQuery UI Autocomplete documentation, I have changed it to the correct format.
  2. My AJAX call was sending the tag name as the wrong parameter, too.

It works now!

Upvotes: 0

Robert Koritnik
Robert Koritnik

Reputation: 105029

The problem is most probably the split function which looks like it's some custom split function. It's hard to say since there's not all relevant code here.

Upvotes: 1

Related Questions