HTML表格下的文本框控件自动完成功能 [英] Autocomplete for text box control under HTML table

问题描述

我有一个Html表有多个行，一个下拉和一个文本框控件。

我想要该文本框的自动完成功能。我实现了以下代码自动完成但它正在触发仅用于第一行。动态添加行（在jquery中）它们不适用于那些行。



我尝试过： < br $>

代码：
 
< table class =table table-bordered table-hover datatable-highlightid = tWDE_Items > 
< thead> 
< tr> 
< th style =display：none> ItemId< / th> 
< th>商品名称< / th> 
< th> UOM< / th> 
< / tr> 
< / thead> 
< tbody> 
 @foreach（Model.Data_Wde_ItemGrid中的var项目）
 {
< tr class =datarow> 
 
< td style =display：none> @ Item.Item_Id< / td> 
 
< td> @ Html.EditorFor（m => Item.Item_Name，new {htmlAttributes = new {@class =form-control}}）< / td> 
 
< td> @ Html.DropDownListFor（m => Item.UOM_Id，新的SelectList（Item.UOMDetails，UomId，UomName），htmlAttributes：new {@class =form -control，id =UomId}）< / td> 
< / tr> 
} 
< / tbody> 
< / table> 
 
 
 Jquery：
 
< pre> $（'＃Item_Item_Name'）。autocomplete（{
 
 source：function（request，response）{
 debugger; 
 var param = {ItemName：$（'＃Item_Item_Name' ）.val（）}; 
 $ .ajax（{
 url：/ WDE / GetAutoCompleteItemList，
 data：JSON.stringify（param），
 dataType：json ，
类型：POST，
 contentType：application / json; charset = utf-8，
成功：函数（数据）{
 response（$。map） （data，function（item）{
 return {
 val：item.split（'÷'）[0]，
 label：item.split（'÷'）[1] 
 
} 
}））
}，
错误：函数（响应）{
 alert（response.responseText）; 
}， 
失败：函数（响应）{
 alert（response.responseText）; 
} 
}）; 
}，
更改：function（e，i）{
 if（i.item）{
 
} 
 else {
 $ （ '#Item_Item_Name'）VAL（ ''）; 
 $（'＃Item_Item_Id'）。val（''）; 
} 
}，
 select：function（e，i）{
 debugger; 
 $（'＃Item_Item_Name'）。val（i.item.label）; 
 $（this）.closest（tr）。find（td）。eq（2）.html（i.item.val）; 
 
}，
 minLength：1 
}）; 

解决方案

（' #Item_Item_Name'）。autocomplete（{

source：function（request，response）{
debugger;
var param = {ItemName：

< blockquote>（'＃Item_Item_Name'）。val（）};

.ajax（{
url：/ WDE / GetAutoCompleteItemList，
data：JSON。 stringify（param），
dataType：json，
类型：POST，
contentType：application / json; charset = utf-8，
成功：函数（数据）{
回复（

I have a Html table having multiple rows with one drop down and one textbox control.
I want auto complete function for that text box.I implemented the following code for auto complete but it is firing for only first row.The rows are added Dynamically (in jquery) its not workig for those rows.

What I have tried:

Code:

         <table class="table table-bordered table-hover datatable-highlight" id="tWDE_Items">
                            <thead>
                                <tr>                                 
                                    <th style="display:none">ItemId</th>                                
                                    <th>Item Name</th>                                  
                                    <th>UOM</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var Item in Model.Data_Wde_ItemGrid)
                                {
                                    <tr class="datarow">
                                                                              
                                        <td style="display:none">@Item.Item_Id</td>
                                       
                                        <td>@Html.EditorFor(m => Item.Item_Name, new { htmlAttributes = new { @class = "form-control" } }) </td>
                                      
                                        <td>@Html.DropDownListFor(m => Item.UOM_Id, new SelectList(Item.UOMDetails, "UomId", "UomName"), htmlAttributes: new { @class = "form-control", id = "UomId" })</td> 
                                    </tr>
                                }
                            </tbody>
                        </table>


Jquery :

    <pre>  $('#Item_Item_Name').autocomplete({

        source: function (request, response) {
            debugger;
            var param = { ItemName: $('#Item_Item_Name').val() };
            $.ajax({
                url: "/WDE/GetAutoCompleteItemList",
                data: JSON.stringify(param),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            val: item.split('÷')[0],
                            label: item.split('÷')[1]
                           
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        change: function (e, i) {
            if (i.item) {

            }
            else {
                $('#Item_Item_Name').val('');
                $('#Item_Item_Id').val('');
            }
        },
        select: function (e, i) {
            debugger;
            $('#Item_Item_Name').val(i.item.label);
            $(this).closest("tr").find("td").eq(2).html(i.item.val);
           
        },
        minLength: 1
    });

解决方案

('#Item_Item_Name').autocomplete({ source: function (request, response) { debugger; var param = { ItemName:

('#Item_Item_Name').val() };

.ajax({ url: "/WDE/GetAutoCompleteItemList", data: JSON.stringify(param), dataType: "json", type: "POST", contentType: "application/json; charset=utf-8", success: function (data) { response(

这篇关于HTML表格下的文本框控件自动完成功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！