jQuery 自动完成自定义

Question

我想用 jQuery 和自动完成功能做一些非常具体的事情，但我在网上找不到合适的答案。我的第一个问题是我在网上能找到的所有方法都不起作用（parse、formatItem 等等）。

奇怪的是，自动完成功能与以下代码完美配合，但忽略了所有其他“自定义”方法（@​​987654328@、formatItem 等）。

/* autocompletion */
$( '#metier' ).autocomplete({
  source: '/json/metiers/categories/mix/',
  minLength: 2,
  select: function(event, ui) {
    /* item look like '(XXXX) yyyy'
       => remove '(XXXX)' then forbid 
          autocomplete() to assign its own value
          via 'return false' :
    */
    var v=ui.item.value;
    $('#metier').val(v.substr(v.indexOf(') ')+1));
    return false;
  }
});

这是我在<header> 中输入的内容：我正在使用所有内容的最新版本，所以我不知道它有什么问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" media="screen" />

---

这是我所做的，它有效：

• 为输入字段添加自动完成功能
• 选择完成后，删除选择开头的(XXX)，并用剩下的内容填充输入字段

---

这就是我想要做的：

• 为输入字段添加自动完成功能
• 当 AJAX 返回时，将生成的数组（即 JSON）存储在全局变量中（以便以后能够检索相应的字段（实际上是url）
• 对于将在列表中显示的每个标签，创建一个自定义显示（开头总是有一个 (XXX)，我希望它是彩色的），并创建一个自定义 ID（取决于 AJAX 返回)。
• 进行选择时，删除选择开头的(XXX)，并用剩下的内容填充输入字段，从选择的id中提取id号，并将对应的字段url存入全局变量中的全局数组供以后使用。

---

我正在使用 jQuery 自动完成组件，AJAX 调用返回如下内容：

[
    {
        "id":"229",
        "value":"(Category) General category of that stuff",
        "url":"//"
    },
    {
        "id":"240",
        "value":"(Category) General category of that stuff",
        "url":"/toto/detail/tata"
    },
    {
        "id":"3655",
        "value":"(Detail) Very detailed stuff",
        "url":"/toto/detail/tata"
    }
]

我已经看过了：

• stackoverflow what-does-formatresult-and-formatitem-options-do-in-jquery-autocomplete
• blog.schuager.com jquery-autocomplete-json-apsnet-mvc
• stackoverflow json-with-autocomplete
• jqueryui autocomplete custom-data / jqueryui autocomplete custom-data

但没有什么可以帮助我......

Answer 1

在 jQuery UI 网站上有一个关于如何自定义显示的教程：

• http://jqueryui.com/demos/autocomplete/#custom-data

要对下拉列表中的项目进行自定义显示，它会在.autocomplete 调用之后链接.data("autocomplete") 调用，并将_renderItem 函数添加到检索到的数据中。

这里有一些代码可以对括号中的项目进行自动着色：

http://jsfiddle.net/VnUv8/

.data("autocomplete")._renderItem = function(ul, item) {
    var v = item.value;
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append(
            "<a>"
                + "<span class='hilightItem'>"
                    + v.substr(0, v.indexOf(') ') + 1)
                + "</span>"
                + " " + v.substr(v.indexOf(') ') + 2)
            + "</a>"
        )
        .appendTo(ul);
};