Question

我使用了自动完成jQuery，就像this一样。它的工作完美但现在我在这个搜索结果中也添加了图像，如image1.png。现在用户将选择结果，然后图像也将显示在文本框中。我没有为select事件做过点击事件。当用户点击结果时我已经设置了文字弓的BG图像。我也想选择。

enter image description here

在我的jQuery代码下面

jQuery(".ui-menu-item").live("click",function(){
    var pr = jQuery('img',this).attr('src');
    jQuery('#zipsearch').css('background-image', 'url(' + pr + ')');
});

jQuery('#ui-active-menuitem').live("hover", function() {
         var pr = jQuery('img',this).attr('src');
    jQuery('#zipsearch').css('background-image', 'url(' + pr + ')');
    });

Answer 1

查看jQuery自动完成文档的自定义数据示例。

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

Skype以exakt相同的方式进行，他们只是使用CSS设置样式，看起来就像输入中的标志一样。但是输入位于它们放置旗帜的div旁边，它们用带边框的div围绕它。

.container{
  border: 1px solid #aaa;
  height: 40px;
}
#project{
  height: 34px;
  width: auto;
  border: none;
}

http://jsfiddle.net/JAT2a/

这是一个小jsFiddle来演示它：

Answer 2

img标记内不能包含input个标记。
如果您已经检查过skype方法，那么您会发现他们在li标记内使用inpu。

这是我的方法。

1）我的HTML设置就像

<ul class="email-textbox">    
    <li id="images"><img src=""/></li>
    <li><input id="auto" type="text" /></li>
</ul>

2）我不记得我在哪里得到这个fiddle，基于它，我已经修改过它。以下是我添加的代码

  select: function(i, j){           
            var d  = j.item. avatar;
            $('#images img').prop('src', d);
        }

select 是jQuery UI自动完成的默认方法，您可以在其中编写选择选项后要执行的操作。

<强> 1。选择之前

enter image description here
的 2。选择后，添加图像

enter image description here

当类添加调用我的函数或事件

2 个答案:

JSFiddle