Question

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

我有一个多维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

使用_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 );
       }
    });

Answer 2

  $(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）。

使jQuery自动完成结果，链接

2 个答案: