文章/答案/技术大牛

发布

社区首页 >问答首页 >使jQuery自动完成结果、链接

问使jQuery自动完成结果、链接
EN

Stack Overflow用户

提问于 2016-04-15 20:04:16

回答 2查看 47关注 0票数 0

我使用的是与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
});

javascript

php

jquery

arrays

autocomplete

回答 2

Stack Overflow用户

发布于 2016-04-15 20:11:25

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

票数 0

Stack Overflow用户

发布于 2016-04-15 20:12:32

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36646661

复制

相似问题

问使jQuery自动完成结果、链接
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使jQuery自动完成结果、链接EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使jQuery自动完成结果、链接
EN