实施jQuery的自动完成多值和图像 [英] Implement Jquery autocomplete with multiple values and images

问题描述

我是新来的jQuery，并试图实现自动完成，返回图像（由堆栈中的一员提出），但选择不同的值（多个值）的可能性面临的一个问题。但在我的code，用户只能选择唯一的一个值。

I'm new to jQuery, and facing a problem while trying to implement autocomplete that returns images (made by a member of the Stack) but with the possibility of choosing various values ​​(Multiple Values). But in my code, the user can only select only one value.

这里的的jsfiddle：

Here's the jsfiddle:

http://jsfiddle.net/Igaojsfiddle/85SAF/

$(function() {
function split( val ) {
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}

$( "#tags" )
  // don't navigate away from the field on tab when selecting an item
  .bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB &&
        $( this ).data( "ui-autocomplete" ).menu.active ) {
      event.preventDefault();
    }
  })
  .autocomplete({
    minLength: 0,
     source: function (request, response) {
        $.ajax({
            url: "http://api.stackoverflow.com/1.1/users",
            data: {
                filter: request.term,
                pagesize: 10
            },
            jsonp: "jsonp",
            dataType: "jsonp",
            success: function(data) {
                response($.map(data.users, function(el, index) {
                    return {
                        value: el.display_name,
                        avatar: "http://www.gravatar.com/avatar/" +
                            el.email_hash
                    };
                }));
            }
        });
    },
    focus: function() {
      // prevent value inserted on focus
      return false;
    },
    select: function( event, ui ) {
      var terms = split( this.value );
      // remove the current input
      terms.pop();
      // add the selected item
      terms.push( ui.item.value );
      // add placeholder to get the comma-and-space at the end
      terms.push( "" );
      this.value = terms.join( ", " );
      return false;
    }
  }).data("autocomplete")._renderItem = function (ul, item) {
    return $("<li />")
        .data("item.autocomplete", item)
        .append("<a><img src='" + item.avatar + "' />" + item.value + "</a>")
        .appendTo(ul);
};

}）;

推荐答案

的问题是，你是逗号后发送从文本框中的完整文本作为过滤器（如名1，一），而不仅仅是部分（例如，一）。你做正确的请求（如可以通过看您选择的浏览器的开发人员工具栏中的网络选项卡中可以看出），但你不作为查询的一部分发送正确的数据。它好像你已经开始与code的副本， http://jqueryui.com/autocomplete /＃多，但是你有没有使用的 extractLast 的方法。如果更改的数据的距离

The problem is that you're sending the complete text from the textbox as a filter (e.g. "Name1, a") instead of just the part after the comma (e.g. "a"). You're correctly making requests (as can be seen by looking at the Network tab in the developer toolbar of your browser of choice), but you're not sending the correct data as part of the query. It seems as though you have started with a copy of the code from http://jqueryui.com/autocomplete/#multiple, but you haven't used the extractLast method. If you change the data part of the json call from

data: {
    filter: request.term,
    pagesize: 10
},

到

data: {
    filter: extractLast(request.term),
    pagesize: 10
},

它应该工作。我曾与此更新您的jsfiddle（ http://jsfiddle.net/85SAF/10/ ）和这似乎很好地工作。

It should work. I have updated your jsfiddle (http://jsfiddle.net/85SAF/10/) with this and it seems to work fine.

希望它帮助！

这篇关于实施jQuery的自动完成多值和图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！