将jQuery自动完成应用于JSON对象

Question

我正在尝试使用jQuery自动完成功能，为文本区域创建基于触发器的自动完成（当您键入“@”时，自动完成功能会启动）。

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

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/。请指出我的错误并解释一下。

- Ateev Chopra

Answer 1

问题已解决。

由于jQuery中存在一个错误，导致出现了这种情况。数据必须以“标签”和“值”的形式呈现，否则不起作用。

感谢所有尝试过的人。

以下是最终的工作示例：http://jsbin.com/qakefini/7

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

- Ateev Chopra

Answer 2

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

请查看您更新/删除的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"
},{

在你的自动完成功能中，renderitem缺少了一些东西，顺便提醒一下你应该更新使用的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 );
};

- JF it

---

它不起作用。它应该工作的方式是，当您输入某些内容并输入“＃”时，自动完成应该被触发。在您的情况下，甚至在我开始输入之前就触发了自动完成。 - Ateev Chopra

添加额外的数据会如何产生变化？ - Ateev Chopra

你可以参考这个第一个 fiddle。它适用于单数组操作。 http://jsfiddle.net/5x9ZR/4/ - Ateev Chopra

我想不出来...这是我的代码- 我认为你应该能够在没有keyup的情况下完成它。http://jsfiddle.net/jFIT/HGxSX/2/ - JF it