Applying jquery autocomplete to the json object

Question

I am trying to make trigger based auto-complete in textarea using jQuery autocomplete. (when you type "@", the autocomplete starts).

Till now I am able to implement it for the case where the data is an array.

HTML

<textarea class="searchBox" rows="10" cols="20"></textarea>

jQuery

var triggered = false; // By default trigger is off
var trigger = "#"; // Defining the trigger

$(".searchBox").autocomplete({
    source: [ // defining the source
    "A",
        "Apple",
        "S",
        "D",
        "q"],
    search: function () { // before search, if not triggerred, don't search 
        if (!triggered) {
            return false;
        }
    },
    select: function (event, ui) { // invokes the data source, search starts
        var text = this.value;
        var pos = text.lastIndexOf(trigger);
        this.value = text.substring(0, pos + trigger.length) + ui.item.value;
        triggered = false;
        return false;
    },
    focus: function (event, ui) {
        return false;
    },
    minLength: 0 // minimum length of 0 require to invoke search 
});

$('.searchBox').keyup(function (e) {

    if (e.keyCode == 38 || e.keyCode == 40) {
        return;
    }

    var text = this.value;
    var len = text.length;
    var last;
    var query;
    var index;

    if (triggered) {
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search", query);
    } else if (len >= trigger.length) {
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }
});

Here is its fiddle : http://jsfiddle.net/5x9ZR/4/

Now I was trying to implement it when the data is in the form of json object.

But the autocomplete isn't responding with results. I tried it bare. ( without any trigger mechanism ). It isnt displaying any results.

Code:

HTML

<textarea class="searchBox" rows="10" cols="20"></textarea>

jQuery

var triggered = false; // By default trigger is off
var trigger = "#"; // Defining the trigger

var data = [{
    "name": "needmoreinfo",
        "email": "needmoreinfo"
}, {
    "name": "explained",
        "email": "explained"
}, {
    "name": "raypipeline09",
        "email": "raypipeline09"
}];

$(".searchBox").autocomplete({
    source: data,
    search: function () { // before search, if not triggred, don't search 
        if (!triggered) {
            return false;
        }
    },
    select: function (event, ui) { // invokes the data source, search starts
        var text = this.value;
        var pos = text.lastIndexOf(trigger);
        this.value = text.substring(0, pos + trigger.length) + ui.item.email;
        triggered = false;
        return false;
    },
    focus: function () {
        return false;
    },
    minLength: 0 // minimum length of 0 require to invoke search 
})._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.name + "<br>" + item.email + "</a>")
        .appendTo(ul);
};

$('.searchBox').keyup(function (e) {

    if (e.keyCode == 38 || e.keyCode == 40) {
        return;
    }

    var text = this.value;
    var len = text.length;
    var last;
    var query;
    var index;

    if (triggered) {
        index = text.lastIndexOf(trigger);
        query = text.substring(index + trigger.length);
        $(this).autocomplete("search", query);
    } else if (len >= trigger.length) {
        last = text.substring(len - trigger.length);
        triggered = (last === trigger);
    }
});

Here is the fiddle of what I tried. http://jsfiddle.net/HGxSX/

Where I am going wrong ? Please explain.

Answer 1

Solved it.

There is a bug in the jQuery due to which this was happening. The data has to be in the form of "label" and "value". Otherwise it doesn't works. Thanks to anyone who tried.

Here is the final working fiddle : http://jsbin.com/qakefini/7

PS: I tried making account on the jQuery website but could not login. Its saying some redirection problem. If someone has an account, please report the bug.

Answer 2

Doesnt seem to like json strings without a label - it uses this on its keyup to check values..

see your updated/destroyed fiddle: http://jsfiddle.net/jFIT/HGxSX/1/

var data = [
 {
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png",
    name: "needmoreinfo",
    email: "needmoreinfo"
},{

and in your autocomplete function the renderitem was missing some things, you should update the version of jquery your using btw.. seems alot simpler in 1.9:

}).data( "autocomplete" )._renderItem = function( ul, item ) { console.log('wut');
    return $( "<li>" )
  .data( "item.autocomplete", item )
  .append( "<a>" + item.email + "<br>" + item.name + "</a>" )
  .appendTo( ul );
};