Question

我已经根据输入表单中的字符串实现了实时搜索。结果以这种方式正确显示：

<input type="text" class="form-control" name="search_client" id="search_client" required autocomplete="off">
<ul id="results_client" class="liveresults">
    <li class="liveresult">
        <h5 class="result_name" data-value="Joo Fogn"><i class="fa fa-user fa-fw"></i> Joo Fogn</h5>
    </li>
    <li class="liveresult">
        <h5 class="result_name" data-value="Peter Nash"><i class="fa fa-user fa-fw"></i> Peter Nash</h5>
    </li>
</ul>

但是，当用户点击其中一个可能的结果时，我希望使用显示的结果自动填充输入。

要做到这一点，我会截取结果上的点击并将结果值提供给输入，如下所示：

$(".result_name").click(function(){     
    $("#search_client").val($(".result_name").data("value"));
});

然而，当我点击结果时，没有任何反应。我该如何解决？

Answer 1

试试这个：你可以使用.on()绑定click事件并使用$(this)来获取被点击的元素jQuery实例来读取它的数据值。

$(document).on("click",".result_name",function(){     
    //use $(this) to get clicked element and read its value
    $("#search_client").val($(this).data("value"));
});

Answer 2

请参阅此示例：http://jsfiddle.net/kevalbhatt18/g393kqgd/1/

的

的
$(".result_name").click(function(){ $("#search_client").val($(this).data("value")); });

的

Jquery .click（）不使用livesearch

2 个答案: