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

时间:2013-12-06 08:51:49

标签: javascript jquery search

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

Image 1

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 + ')');
    });

2 个答案:

答案 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;
}

http://jsfiddle.net/JAT2a/

这是一个小jsFiddle来演示它:

答案 1 :(得分:1)

  1. img标记内不能包含input个标记。
  2. 如果您已经检查过skype方法,那么您会发现他们在li标记内使用inpu。
  3. 这是我的方法。

    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

    JSFiddle