JQuery 实时搜索 - 填充输入问题答案

【问题标题】：JQuery live search - populate input issueJQuery 实时搜索 - 填充输入问题
【发布时间】：2015-04-23 22:00:59
【问题描述】：

我对 JQuery/Javascript 的了解非常有限，而且我在实现实时搜索时遇到了一个小问题。给定一个输入字段，一旦用户开始输入要搜索的内容，实时搜索框将显示可能的结果。如果用户决定单击建议的字段之一，则单击的项目将被填充到输入框中。

我的问题真的很奇怪。一切正常，除了如果单击实际文本或图像，单击的建议结果不会注册。仅当单击建议结果的 div 层的空白区域时才会填充输入框。我需要它，以便无论在建议的结果上单击何处，都会填充输入框。

HTML：

<input autocomplete=off name="search1" type="text" class="search1" id="searchid1"/>
<div id="result1"></div>

JQuery:

$(function(){
    $(".search1").keyup(function() 
    { 
    var searchid1 = $(this).val();
    var dataString = 'search1='+ searchid1;
    if(searchid1!='')
    {
        $.ajax({
        type: "POST",
        url: "ajaxsearch1.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
        $("#result1").html(html).show();
        }
        });
    }return false;    
    });

    jQuery("#result1").live("click",function(e){ 
        var $clicked = $(e.target);
        var $name = $clicked.find('.name').html();
        var decoded = $("<div/>").html($name).text();
        $('#searchid1').val(decoded);
    });
    jQuery(document).live("click", function(e) { 
        var $clicked = $(e.target);
        if (! $clicked.hasClass("search1")){
        jQuery("#result1").fadeOut(); 
        }
    });
    $('#searchid1').click(function(){
        jQuery("#result1").fadeIn();
    });
    });

Ajaxsearch1.php 返回纯 html。伪代码：

<div class="show>
<div style="float:left;>Thumb image here</div>
<div style="float:right;>Text here</div>
</div>

感谢您的帮助。

【问题讨论】：

标签： jquery html

【解决方案1】：

注意：

live() 方法在 jQuery 版本 1.7 中被弃用，并在 1.9 版。请改用 on() 方法。

【讨论】：

感谢您的提醒。我已移至 on() 方法，但我的问题仍然存在。

【解决方案2】：

试试这个：

$('#result1').on('click', '.show', function(e){
    var img_name = $(this).find('.name').html();
    $('#searchid1').val(img_name);
});

代替：

jQuery("#result1").live("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find('.name').html();
    var decoded = $("<div/>").html($name).text();
    $('#searchid1').val(decoded);
});

如果这不起作用，那么您的解释中存在一个问题。例如，您的伪代码在任何地方都没有包含“name”类？

【讨论】：