EasyUI Forum
March 28, 2024, 06:16:48 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: What's the best way to make a datalist dynamically filtered by textbox enter ?  (Read 6272 times)
jgautier
Newbie
*
Posts: 20


View Profile
« 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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);
        }
        ">
Logged
jgautier
Newbie
*
Posts: 20


View Profile
« Reply #2 on: February 20, 2017, 08:31:59 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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();
//...
})
Logged
jgautier
Newbie
*
Posts: 20


View Profile
« Reply #4 on: February 21, 2017, 06:13:25 AM »

Perfect : thanks a lot.
JG
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!