Webix input, server side autosuggest (minLength)

Webix JS
1

Is it possible to autosuggest worked only after entering a certain number of characters, such as 3?

2

Yes, it possible. You need to customize suggest filtering method:

view:"text",
suggest:{
    filter:function(item, value){
      if(value.length>2 && 
 item.value.toString().toLowerCase().indexOf(value.toLowerCase())===0)
        return true;
      return false;
    },
    url:"mydata.php"
  }

http://webix.com/snippet/51894223

3

Thanks Helga, it works.
One more question on this topic.

  1. How to make a request like "mydata.php?filter[value]=’***’ ") but only after you enter 3 characters.

  2. In the form that uses ‘autocomplete’ transfer ‘id’, as does the “view”: “combo”, but at the same time use the “view”: “text”

4

(1) You can use onDataRequest event, where code can check state of filter and block data auto-loading if filter value is too short

http://webix.com/snippet/77d413e0

Beware that it will block dynamic data loading and server side scrolling as well. The other alternative is to replace default serverFilter with custom one.

5

(2) If you need the same behavior as “combo” control provides, why do not use combo in the first place ?

6

  1. Thank you.

  2. Because when I right-click on the combo is a request to the server, and I need to query the data only after you enter any value to not load the server. Of course, you can configure the file output, but would like to know whether you can do it on the client side.

7

Perhaps I don’t get you correctly, but the above functionality goes for combo as well. Combo uses the same suggest list.

view:"combo",
suggest:{
    filter:function(item, value){
      if(value.length>2 && 
 item.value.toString().toLowerCase().indexOf(value.toLowerCase())===0)
        return true;
      return false;
    },
    url:"mydata.php"
  }

The requests are sent to server only after option list is filtered and the filtering rule can be set on client side, as you can see.

8

Helga, thanks for the reply.
Look like this works for me:


        "elements": [
          {
            "view": "text",
            "name": "partners_sender_name",
            "suggest":{
              body: {
               dataFeed: "data.php"
              },
              on:{
               onValueSuggest: function(node) {
                $$("form_edit").elements.partners_sender_id.data.value = node.id;
                 }
              }
            }
          {
            "view": "text",
            "hidden":"true",
            "name": "partners_sender_id",
          }]

  1. Can we then flattening your filter

  2. Is it possible to make progress icon

9

Sorry, I didn’t get the idea correctly. Serverside options for suggest list have nothing in common with a client-side filter.

But you can define the dataFeed via a function in which you can set the needed condition (minLength). Yet, you will also need to provide the data loading mechanism, which allows you to configure request URL.

"view": "text",
"label":"1",
"name": "partners_sender_name",
"suggest":{
  body:{
       dataFeed: function(filtervalue){
            if(filtervalue.length<3) return;
            var urldata = "filter[value]="+encodeURIComponent(filtervalue);
            this.load("server/data.php?"+urldata, this.config.datatype);
        }
     },
     on:{ ...}
 }

Also, using the onValueSuggest doesn’t seem to be a good idea, as the event will not fire in case user doesn’t choose any option from a suggest list (by clicking it).

It is much better to use the functionality that combo control offers.
It loads serverside options the same way.

Additionally, you can also preload first 10 options to the combo suggest list so that it will not be empty when user clicks it for the first time:

body: {
   url:"server/data.php", //preload
   dataFeed: function(filtervalue){
    if(filtervalue.length<3) return;
         var urldata = "filter[value]="+encodeURIComponent(filtervalue);
         //use above url as dataFeed
         this.load(this.config.url+"?"+urldata, this.config.datatype);
     }
}
10

As to the progress icon, it can be implemented via webix.ProgressBar functionality: http://webix.com/snippet/91485a6c

11

This is what I need. Thank you Helga!