Question

我有一组文本框，其中类为'track'。所有文本框都在单独的td中。对于在同一个td中绑定的每个文本框，我都有特定的div。我正在尝试为每个文本框（自动完成功能）编写一个JavaScript函数，以便它在该特定div中给出建议。

我的结构是......

<tr>
    <td><input name="track[]" type="text" class="track" maxlength="150" onkeyup="lookup(this.value);" onblur="fill();"/>
      <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></td>
</tr>

为此编写JavaScript函数或jquery是否容易？

function lookup(track) {    
    if(track.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        //alert("Hiiii");
        $.post("rpc.php", {queryString: ""+track+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
}

function fill(thisValue) {
    $('#track').val(thisValue);
    setTimeout("$('#suggestions').hide();", 500);
}

注意如何为每个文本框转换它。它为该特定文本框提供建议并仅填充该特定文本框。

Answer 1

我认为以下内容可以满足您的需求。我对lookup()稍作修改 - 它现在要求你传入有问题的输入元素。这就是它允许它对正确的建议元素进行必要的更改。

function lookup(poetname, inputElement) {
    var suggestions = inputElement.next();
    if(poetname.length == 0) {
        // Hide the suggestion box.
        suggestions.hide();
    } else {
        //alert("Hiiii");
        $.post("rpc.php", {queryString: ""+poetname+""}, function(data){
            if(data.length >0) {
                suggestions.show();
                suggestions.children('div').html(data);
            }
        });
    }
}

$('input.track').keyup(function(){
    lookup($(this).val(), $(this));
});

Answer 2

在TD内部的输入上放置一个ID，并将其传递给查找函数。然后，您可以根据需要使用jquery显示和隐藏具有特定类的最近div。

Answer 3

拥有多个具有相同ID的元素非常糟糕。我已从您的代码中删除了所有id属性。

看看这个小提琴：http://jsfiddle.net/FXfLn/3/

<table>
    <tr>
        <td>
            <input name="track[]" type="text" class="track" maxlength="150"/>
            <div class="suggestionsBox" style="display: none;">
                <div class="suggestionList">&nbsp;</div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <input name="track[]" type="text" class="track" maxlength="150"/>
            <div class="suggestionsBox" style="display: none;">
                <div class="suggestionList">&nbsp;</div>
            </div>
        </td>
    </tr>
</table>

...

var lookup = function() { 
    var poetname = this.value;
    var $list = $(this).siblings(".suggestionsBox");
    if(poetname.length == 0) {
        $list.hide();
    } else {

        //Just for testing:

        $list.show();
        $list.find(".suggestionList").html(Math.random());

        // Do your ajax call.

        //$.post("rpc.php", {queryString: poetname}, function(data){
        //    if(data.length >0) {
        //        $list.show();
        //        $list.find(".suggestionList").html(data);
        //    }
        //});
    }
}

var fill = function() {
    var thisValue = this.value;
    $('#poetname').val(thisValue);
    var $list = $(this).siblings(".suggestionsBox");
    setTimeout(function() {
        $list.hide();
    }, 500);
}

$(".track").bind("keyup", lookup);
$(".track").bind("blur", fill);

Answer 4

附上每个文本框的keyup，并使用同一父td的子节点上的AJAX调用返回如下：

$('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('#suggestions').hide();
});

现在，在单击建议时填写文本框。这取决于每个建议如何列在autoSuggestions div中。假设建议来自rpc.php格式：

<div class="suggestion_item">suggestion text here</div>
<div class="suggestion_item">suggestion text here</div>
...

您可以执行以下操作：

$('.suggestion_item').click(function() {
    $(this).parents('td').find('.track').val($(this).text());
});

Javascript为具有相同类的文本框组

4 个答案: