文本框组的自动完成列表

时间:2011-12-12 17:48:55

标签: jquery

从我的特定问题我得到了实现自动完成列表的答案..但问题是当我点击任何建议它空白我的输入框。我有类track的输入框。我在模糊事件中使用的函数是..

<input name="track[]" type="text" class="track" maxlength="150"/>
<div class="suggestionsBox" id="suggestions" style="display: none;">
  <img src="images/upArrow.png" style="position: relative; top: -12px; left: 50px;" alt="upArrow" />
  <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div>
</div>

<script>
$('input.track').keyup(function() {
var poetname = $(this).val();
if(poetname.length == 0) {
    // Hide the suggestion box.
    $(this).parent().find('#suggestions').hide();
} 
else {
    $.ajax({
        url: "rpc.php",
        type: "post",
        data: {queryString: poetname},
        context: this, // i.e. the text box
        success: function(data) {
            if(data.length >0) {
                $(this).parent().find('#suggestions').show();
                $(this).parent().find('#autoSuggestionsList').html(data);
            }
        }
    });
}
});

$('input.track').blur(function() {
    $(this).val( );
    $(this).parent().find('.suggestionsBox').hide();
});
</script>

1 个答案:

答案 0 :(得分:0)

这里发生了两件事 -

  1. 我不确定您是否正在捕捉要捕获的事件。我不能告诉用例是什么,但你似乎在说你正在倾听点击建议。但是,您没有在建议框的任何位置捕获任何点击。

  2. 模糊事件只隐藏.suggestionsBox,如果它的意图是什么,那么它的工作正常! $(this).val();行没有做任何有用的事情。 JavaScript实际上是在发现这个价值,但它却没有对它做任何事情。

  3. 无论如何,我都没有看到输入框被删除。

    这是一个使用Ajax测试回声的小提琴:http://jsfiddle.net/xXF9v/