Print Page - What's the best way to make a datalist dynamically filtered by textbox enter ?

Title: What's the best way to make a datalist dynamically filtered by textbox enter ?
Post by: jgautier on February 19, 2017, 11:16:33 AM

Hello (and sorry for my bad english),

I use a datalist, and i'd like to add a textbox (or anything that can get text from user's keyboard) to be able to filter dynamically this datalist.

For ex.,
if you enter "a" in the textbox, datalist shows all items containing "a"
if you enter "ar" in the textbox, datalist shows all items containing "ar"
if you enter "are" in the textbox, datalist shows all items containing "are"
and so on...

What's the best way to do this using easyui ?
I just need some advices about the general procedure.

Thanks a lot,

JG

Title: Re: What's the best way to make a datalist dynamically filtered by textbox enter ?
Post by: stworthy on February 20, 2017, 08:06:02 AM

Add a searchbox component to the page. When typing on the searchbox and press ENTER key, search new dataset and call 'loadData' method to load new data into the datalist.

Code:

<input class="easyui-searchbox" data-options="
        searcher: function(value){
            var data = ...  // search the data
            $('#dl').datalist('loadData', data);
        }
        ">

Title: Re: What's the best way to make a datalist dynamically filtered by textbox enter ?
Post by: jgautier on February 20, 2017, 08:31:59 AM

Quote from: stworthy on February 20, 2017, 08:06:02 AM

Add a searchbox component to the page. When typing on the searchbox and press ENTER key, search new dataset and call 'loadData' method to load new data into the datalist.

Thanks for your answer : it's a good way.

I should have precised something else : I'd like something like an autocomplete behavior.
Type "a", then "ar", then "are" - without press ENTER -, and datalist actualize itself in real time.

I did'nt find this function using searchbox.
Could it be possible with a simple textbox ?

Thanks again

JG

Title: Re: What's the best way to make a datalist dynamically filtered by textbox enter ?
Post by: stworthy on February 20, 2017, 05:22:04 PM

Call the 'textbox' to get the textbox object, turn on the autocomplete feature and bind 'keyup' event on it, you will be able to get the real inputing values. Please try this code:

Code:

$('#t1').textbox('textbox').attr('autocomplete','on').attr('name','myname').bind('keyup',function(e){
	var v = $(this).val();
	//...
})

Title: Re: What's the best way to make a datalist dynamically filtered by textbox enter ?
Post by: jgautier on February 21, 2017, 06:13:25 AM

Perfect : thanks a lot.
JG

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jgautier on February 19, 2017, 11:16:33 AM