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

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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