Click here to Skip to main content
14,733,301 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Posted
Updated 4-Jul-18 6:21am

What you seek is Cascading Dropdowns. Follow this[^] and you'll get the idea how to solve your problem.


KR
   
You'll have to make a separate method that gets all the vendors based on the itemName. For example:

[WebMethod]
public List<Vendor> GetVendorsByItem(int itemID){
        var query = from c in Vendors
                    where c.ItemID == itemID
                    select c;
        return query.ToList();
}


The code above is just an example. You would need to replace that based on your business needs. Now once you have that method, you can then make an AJAX call to that method just like what you have currently and then populate your second DropDownList based on the returned data.

Here's a great article that you can refer about: Cascading DropDownLists with jQuery and ASP.NET[^]
   
you need to check propertychange event of textbox
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900