我使用了自动完成jQuery,就像this一样。它的工作完美但现在我在这个搜索结果中也添加了图像,如image1.png。现在用户将选择结果,然后图像也将显示在文本框中。我没有为select事件做过点击事件。当用户点击结果时我已经设置了文字弓的BG图像。我也想选择。
在我的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 + ')');
});
答案 0 :(得分: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;
}
这是一个小jsFiddle来演示它:
答案 1 :(得分:1)
img
标记内不能包含input
个标记。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。选择之前
的 2。选择后,添加图像