Jquery autocomplete on dropdownlist

Question

0.00/5 (No votes)

See more:

, +

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 1-Jul-18 21:02pm

Faran Saleem

Updated 4-Jul-18 5:21am

Add a Solution

3 solutions

Add a Solution

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

Krunal Rohit · Answer 1 · 2018-07-01T21:13:00

Solution 1

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

KR

Posted 1-Jul-18 21:13pm

Krunal Rohit

Vincent Maverick Durano · Answer 2 · 2018-07-03T16:51:00

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

C#

[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[^]

Member 12893295 · Answer 3 · 2018-07-04T05:21:00

Solution 3

you need to check propertychange event of textbox

Posted 4-Jul-18 5:21am

Member 12893295

Jquery autocomplete on dropdownlist

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Jquery autocomplete on dropdownlist

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us