Faran Saleem Ответов: 3

Jquery автозаполнение в выпадающем списке


Дорогие все,

Я создаю систему управления запасами, и у меня есть сценарий, в котором я использую 2 раскрывающихся списка для заполнения заявки, один раскрывающийся список-для выбора имени элемента, а другой-для выбора имени поставщика.
Теперь я хотел бы использовать функцию автозаполнения Jquery в обоих выпадающих списках. Например, если я выберу Ручка из первого выпадающего списка (ItemName) таким образом, второй выпадающий список должен иметь фильтр только тех поставщиков, которые предоставляют Ручка, допустим, из 1000 поставщиков только 500 предоставляют перо, поэтому мой второй выпадающий список должен содержать только эти 500 поставщиков, и он также должен быть основан на функции автозаполнения Jquery.

Я сделал только первую часть, которая завершается функцией автозаполнения Jquery на ItemName, но это также делается на textbox я хотел бы сделать это на DropDownList, а также затем отфильтровать поставщиков на основе выбранного элемента и применить автозаполнение Jquery на втором dropdownList также.

Ниже приведен код, используемый до сих пор.

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);
                        }
                    });
                }
      });

}


Что я уже пробовал:

Я пробовал искать решения через google, но не смог их найти

3 Ответов

Рейтинг:
2

Member 12893295

вам нужно проверить событие propertychange текстового поля


Рейтинг:
0

Krunal Rohit

То, что вы ищете-это Cascading Dropdowns. Следовать этот[^] и вы получите представление о том, как решить вашу проблему.


КР.


Рейтинг:
0

Vincent Maverick Durano

Вам придется создать отдельный метод, который получает всех поставщиков на основе имени элемента. Например:

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


Приведенный выше код является лишь примером. Вам нужно будет заменить его, исходя из ваших бизнес-потребностей. Теперь, когда у вас есть этот метод, вы можете сделать AJAX вызовите этот метод точно так же, как то, что у вас есть в данный момент, а затем заполните свой второй DropDownList на основе возвращенных данных.

Вот отличная статья, на которую вы можете сослаться: Каскадные выпадающие списки с помощью jQuery и ASP.NET[^]