将 jquery 自动完成应用于 json 对象

Question

我正在尝试使用 jQuery 自动完成在 textarea 中进行基于触发器的自动完成。 （当您键入“@”时，自动完成开始）。

到目前为止，我能够在数据为数组的情况下实现它。

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);
    }
});

这是它的小提琴：http://jsfiddle.net/5x9ZR/4/

现在我尝试在数据为json对象形式的情况下实现它。

但自动完成功能没有响应结果。 我试过裸露的。 （没有任何触发机制）。它没有显示任何结果。

代码：

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);
    }
});

这是我尝试过的小提琴。 http://jsfiddle.net/HGxSX/

我哪里出错了？请解释一下。

Answer 1

解决了。

由于发生这种情况，jQuery 中有一个错误。 数据必须采用“标签”和“值”的形式。否则它不起作用。 感谢任何尝试过的人。

这是最后的工作小提琴：http://jsbin.com/qakefini/7

PS：我尝试在 jQuery 网站上创建帐户，但无法登录。它说一些重定向问题。如果有人有帐户，请报告错误。

Answer 2

似乎不喜欢没有标签的 json 字符串 - 它在其 keyup 上使用它来检查值..

查看您更新/销毁的小提琴： 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"
},{

并且在您的自动完成功能中，renderitem 缺少一些东西，您应该使用 btw 更新 jquery 的版本。在 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 );
};