Question

我正在构建像FB搜索框建议这样的脚本。在哪里，我有一个INPUT框，用户可以在其中输入名称..并且，一旦用户输入名称，一些建议将自动出现在INPUT框下。所有的建议都会出现在DIV中。我正在使用的代码是这样的......

<input name="Emp_Name" id="emplyoee_search">  
<div class="list"></div>

我在DIV（）中插入的建议列表..我正在通过ajax＆amp;使用jquery.HTML（）我将那些列表插入到那个DIV（）中。

我在DIV（）中插入的建议列表HTML代码是这样的事情。

<div class="listItem" align="left">Sunit K Marwah</div>
<div class="listItem" align="left">Sunit Maurya</div>

现在，发生的事情是......我已经成功地在DIV（）中构建了建议列表。但是，我遇到的困难是...当某人点击任何特定的建议清单（名称）时，javascript事件需要消防＆amp;名称需要出现在给定的INPUT框中。

对于java脚本事件触发我正在使用JQuery.HTML（）＆amp;代码是这样的..

$("div.listItem").click(function () { 
 var string = $(this).text();
 alert(string); 
//console.log(string);
});

但是，我的问题是..我可以成功显示列表但是当我点击建议列表中的任何特定名称时，java脚本事件不会触发＆amp;我无法抓住这个名字。

我不是java脚本xpert。所以，不知道到底出了什么问题。需要一些帮助。

问候

Answer 1

如果你想让一个事件处理程序对你动态添加到dom的html有效，那么jQuery live函数就可以了。如果你正在寻找它。

$("div.listItem").live("click", function () {  
   var string = $(this).text(); 
   alert(string); 
   //console.log(string);
});

Answer 2

寻找jquery ui自动完成插件，它会让你的生活更轻松...也可以点击活动使用直播

$("div.listItem").live("click",function () { ...}

或delegate

$("div.list").delegate(".listItem","click",function(){...});

Answer 3

尝试：

 $(".list div").each(function(){
       alert($(this).text());
      });

Answer 4

你的ajax回应应该是：

<select id='empNameAuto' size='1' onClick='sugAccepted($(this.val));' >
    <option value='value1'>value1</option>
    <option value='value2'>value2</option>
    <option value=n>n</option>
</select>

function sugAccepted(which) {
    $('#Emp_Name').val(which);
}

the drop down list should be css-ed something like:

<div .... style='max-height:..px; overflow:scroll'>the select goes here</div>

That will look like a drop down regular select box.

祝你好运！

编辑：实际上，我在这里犯了一个错误，因为这个想法是完全避免选择。我的想法是正确的，但实施可以用另一种方式完成：

Your (new) ajax response:

<span style='display:block;' onClick="sugAccepted('" + response1 + "'); ">
 response1
</span>
<span style='display:block;' onClick="sugAccepted('" + response2 + "'); ">
 response2
</span>
<span style='display:block;' onClick="sugAccepted('" + response3 + "'); ">
 response3
</span>
<span style='display:block;' onClick="sugAccepted('" + response4 + "'); ">
 response4
</span>

function sugAccepted(which) {
    $('#Emp_Name').val(which);
    get-rid-of-the-suggestion-box
}


the drop down list should be css-ed something like:

<div .... style='max-height:..px; overflow:scroll'>those span go here</div>

[NOW] That will look like a drop down regular select box.

编辑：“下拉”的位置：

你如何定位下拉？如果你还没弄明白，我建议：

$('#Emp_Name').keyup( function () {
    ajax-get-suggestion-list;
    if ('#suggestionBox').is(':hidden')) {
        var absH = $('#Emp_Name').offset().top;
        var absL = $('#Emp_Name').offset().left;
        append-box-absolutely-at-absH-and-absL
    }
    drop ajax-response-into-suggestion-box
    $('#suggestionBox').html(ajax-response-of-suggestions);
});

如何使用jquery.html在div中插入html代码

4 个答案: