使 jQuery 自动完成结果，链接

Question

我正在使用与 jquery-ui 捆绑在一起的 jQuery 自动完成功能。无论如何，我需要自定义这点来弹出链接，而不仅仅是文本。

我有一个多维 PHP 数组，其中包含一些文本和 MYSQL 数据库中该文本的相应 ID。

$js_array = json_encode($php_array);
echo "var javascript_array = ". $js_array . ";\n";

所以，现在我有了一个多维 js 数组。但我不知道如何使用这些值来创建链接。

数组中的文本项应该是链接的文本部分，ID应该是链接的URL。

这是我现有的代码。如何自定义它以实现我的目的...

$("#search_query").autocomplete( { 
   source: javascript_array
});

Answer 1

  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

    $( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });

您可以使用任何自定义属性值，标签必须根据您的要求保留（这里我们使用desc and icon）。

Answer 2

使用_renderItem 选项：

控制小部件菜单中每个选项的创建的方法。 该方法必须创建一个新的<li> 元素，将其附加到菜单中，然后 退货。

_renderItem: function( ul, item ) {
  return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
    .appendTo( ul );
}

---

1) 删除这个：

.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

2) 改为在此处添加。确保您有一个 href 参数，否则大多数浏览器不会将其视为链接。

$( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      },
      _renderItem: function( ul, item ) {
          return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
               .appendTo( ul );
       }
    });