我有一组文本框,其类别为“跟踪”。 所有文本框都在单独的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);
}

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

===============>>#1 票数:0

我认为以下将满足您的需求。 我对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));
});

===============>>#2 票数:0

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

===============>>#3 票数:0

具有多个具有相同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);

===============>>#4 票数:0

附加每个文本框的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());
});

  ask by Rahul Singh translate from so

未解决问题?本站智能推荐:

1回复

如何使用jQuery在每个组中具有相同类名的多个输入文本框中插入值?

如何在具有相同类名的多个输入文本框中为每个组插入值。 我想更新每个组的输入文本框值。 我下面的代码可以正常工作,但是当我选择自动完成中的项目时,它会填满所有文本框。 我想要的是,如果我在项目组1中选择了一个项目,则仅应更新组1中的文本框。
3回复

具有相同名称属性的复选框组和其他文本框?

假设我有几个复选框选择: 如果我要选中other复选框。 我应该给#productionDownOther文本框赋予与复选框相同的名称属性吗? 那应该是吗? 我打算使用php方法implode将选定的值添加在一起,并将其插入数据库的一列中。 如果我的计划有误,请告诉我,如
1回复

多个文本框填充jQuery中具有相同类的下拉选择

我使用了多个具有相同类的文本框的概念,并使用了多个具有相同类的多个下拉选项选择。我遇到了问题。当我单击第一个下拉选项时,它将更改第二个文本框的值。我单击第一个下拉选项,它将更改其他第一个文本框的值;如果单击第二个下拉选项,它将更改第二个文本框的值。 $('input[name="txt"]'
3回复

如何在jQuery中将值插入具有相同类名的文本框

我有按顺序排列的值的arraylist,我想在arraylist的文本框(输入类型=“ text” class =“ same”)中插入值。 这是我的JavaScript代码 这是jsp的代码 我在这里附上了一个屏幕截图 我想将值从arraylist设置为序列号。
3回复

如何使用jquery对具有相同类的文本框的值求和并将其放入另一个文本框内

如何可以具有总类中的所有文本框的值1 , 2和3 ,并把它内部sum_1 , sum_2和sum_3 我尝试过这种方式 jQuery在这里: HTML在这里: 这是小提琴http://jsfiddle.net/5gsBV/36/ ,对一个值有效 但是我该如何针对
1回复

Rails javascript-具有相同类别的两个选择框,但一个值的选择未在另一个中显示

我得到了一个表格,其中有两个从同一类别模型填充的选择框 。 现在,有任何方法可以确保在任何情况下都只能从任何一个选择框中选择一个类别。 例如,如果从第一个选择框中选择“书”,则第二个选择框不显示“书”值,反之亦然,或者 如果选择从第二个选择框 “音乐”, 先不显示其价值“音乐”
5回复

具有相同类别的目标元素

这就是我要实现的目标:如果单击#month > li >a一个月,则该月在具有该 月 的班级名称的列表中 #month > li >a 。 (并隐藏其他月份列表,因此仅显示1)听起来很简单,但我不知道哪种方法是使用jQuery的正确方法。 我有这个标记:
1回复

具有相同类别的动态元素

关于动态创建的元素,我遇到了一些问题。 我正在尝试为我的站点创建一个页面,该页面将显示用户列表(已从控制器传递到我的视图中)。 我为每个用户创建了一个div持有人,在每个div内,我有两个h3标签,分别显示用户的ID和名称。 每个用户div还包含一个按钮,该按钮允许隐藏或显示用户。
4回复

在具有相同类别的一组div中将鼠标悬停在单个div上显示覆盖

假设我有4个动态生成的div,每个div具有相同的类,并且具有唯一的数字ID,就像这样。 每个都包含一个绝对定位的div,其宽度和高度为100%,因此在显示时,它会填充整个div。 当我将鼠标悬停在这些div之一上时,我想要那个div,而其他都不显示该覆盖,那么当我停止悬停时,该覆盖d
2回复

在具有多个具有相同ID的文本框的特定变量上获取最新文本框的值

我希望最后一个文本框的值由具有相同ID的多个文本框上的变量捕获。 的HTML 脚本 或者,删除第一个文本框的方法也可能有效。 工作实例