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

Question

我有一组文本框，其类别为“跟踪”。 所有文本框都在单独的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，并使用该ID。

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，并在div上使用AJAX调用，该div是同一父td的子元素，如下所示：

$('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());
});