下拉列表中的Jquery自动完成 [英] Jquery autocomplete on dropdownlist

问题描述

亲爱的，



我正在创建一个库存管理系统，我有一个场景，我使用2个下拉列表来填写申请单，一个下拉列表是选择ItemName，另一个下拉列表选择VendorName。

现在，我想在两个下拉列表中使用Jquery自动完成功能。例如，如果我从第一个下拉列表（ItemName）中选择笔，那么第二个下拉列表应该只筛选那些提供笔的供应商，让我们说1000个供应商只有500个提供笔，所以我的第二个下拉列表应该只包含那500个供应商，它也应该基于Jquery自动完成功能。



我只做了第一部分在ItemName上完成Jquery自动完成功能，但也在文本框上完成我想在DropDownList上完成，然后根据选择的项目筛选出供应商，并在第二个dropdownList上应用Jquery Autocomplete。



以下是到目前为止使用的代码。

函数InitRow（tr）{
 var fld = $（。txt_item_name，tr）; 
 
 fld.data（'row'，tr）; 
 fld.removeClass（'ui-autocomplete-input'）; 
 
 //console.log(tr）; 
 
 fld.autocomplete（{
 select：function（e，ui）{
 
 
 var src_ele = $（e.target）; 
 
 var _tr = src_ele.data（'row'）; 
 
 //console.log(_tr）; 
 
 
 
 var label = ui.item.label; 
 var value = ui.item.value; 
 
 
 
 $（'。vendor-name'，_ tr） .val（ui.item.val.VENDOR_NAME）; 
 $（'。vendor-id'，_ tr）.val（ui.item.val.VENDOR_ID）; 
 $（'。price'， _tr）.val（ui.item.val.PRICE）; 
 $（'。min-qty'，_ tr）.val（ui.item.val.MIN_QTY）; 
 
} ，
来源：function（request，responce）{
 $ .ajax（{
 url：CreatRequistion.aspx / GetItemNames，
 type：post，
 contentType：application / json; charset = utf-8，
 data：JSON.stringify（{term：request.term}），
 dataType：'json'，
成功：函数（数据）{
 resp一次（$。map（data.d，function（item）{return {label：item.ITEMS_DESCRIPTION，val：item}}））
}，
 error：function（err）{
警报（错误）; 
} 
}）; 
} 
}）; 
 
} 

我的尝试：



尝试通过谷歌寻找解决方案但无法找到一个

解决方案

（。txt_item_name，tr）;

fld.data（'row'，tr）;
fld.removeClass（'ui-autocomplete-input'）;

//console.log(tr）;

fld.autocomplete（{
select：function（e，ui）{


var src_ele =

< blockquote>（e.target）;

var _tr = src_ele.data（'row'）;

//console.log(_tr）;



var label = ui.item.label;
var value = ui.item.value;

（'。vendor-name '，_ tr）。val（ui.item.val.VENDOR_NAME）;

Dear all,

I am creating an Inventory Management System and I have an scenario where i am using 2 dropdownlists to fill in a requisition, One dropdown is to select the ItemName and the other dropdownlist is to select the VendorName.
Now, i would like to use Jquery Autocomplete feature on both the dropdownlists. For example, if i select a Pen from the first dropdownlist (ItemName) so the second dropdownlist should have the filter out only those vendors that provide Pen, lets say out of 1000 vendors only 500 are providing pen so my second dropdownlist should contain only those 500 vendors and it should also be based on Jquery AutoComplete feature.

I have done only the first part that is completed the Jquery Autocomplete feature on ItemName but that is also done on textbox i would like to do it on DropDownList and also then to filter out vendors based on Item selected and apply the Jquery Autocomplete on second dropdownList aswell.

Below is the code used so far.

function InitRow(tr){
var fld=$(".txt_item_name",tr);

fld.data('row',tr);
fld.removeClass('ui-autocomplete-input');

//console.log(tr);

            fld.autocomplete({
select:function(e,ui){


var src_ele=$(e.target);

var _tr=src_ele.data('row');

//console.log(_tr);



var label = ui.item.label;
var value = ui.item.value;



$('.vendor-name', _tr).val(ui.item.val.VENDOR_NAME);
$('.vendor-id', _tr).val(ui.item.val.VENDOR_ID);
$('.price', _tr).val(ui.item.val.PRICE);
$('.min-qty', _tr).val(ui.item.val.MIN_QTY);

},
                source: function (request, responce) {
                    $.ajax({
                        url: "CreatRequistion.aspx/GetItemNames",
                        type: "post",
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({ term: request.term }),
                        dataType: 'json',
                        success: function (data) {
responce($.map(data.d, function (item) {  return {label: item.ITEMS_DESCRIPTION,val: item}                        }))
                        },
                        error: function (err) {
                            alert(err);
                        }
                    });
                }
      });

}

What I have tried:

Have tried looking for solutions through google but unable to find one

解决方案

(".txt_item_name",tr); fld.data('row',tr); fld.removeClass('ui-autocomplete-input'); //console.log(tr); fld.autocomplete({ select:function(e,ui){ var src_ele=

(e.target); var _tr=src_ele.data('row'); //console.log(_tr); var label = ui.item.label; var value = ui.item.value;

('.vendor-name', _tr).val(ui.item.val.VENDOR_NAME);

这篇关于下拉列表中的Jquery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！