Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how can dojo.FilteringSelect be configured to match wildcard values?

Below is a sample of a filteringSelect populated with user data. My goal is to have perform wilcard match on the displayed values. for example, if the user types 'son', the dropdown matches will be "homer simpSON' and 'carl calSON'. By default, the match will only be on the beginning of the label.

I tried changing dijit.byId('userselect').searchAttr, but setting it to anything but a string causes erronious behaviour.

<input id="userselect">

<script type="text/javascript">
    dojo.require("dijit.form.FilteringSelect");
    dojo.require("dojo.data.ItemFileReadStore");

    var user_data = {
        "itentifier":"user_id",
        "label":"label",
        "items":[
            {"first_name":"Waylon","last_name":"Smithers","label":"Waylon Smithers","user_id":7}
            ,{"first_name":"Carl","last_name":"Carlson","label":"Carl Carlson","user_id":6}
            ,{"first_name":"Homer","last_name":"Simpson","label":"Homer Simpson","user_id":4}
            ,{"first_name":"Lenny","last_name":"Leonard","label":"Lenny Leonard","user_id":5}
            ,{"first_name":"Montgomery","last_name":"Burns","label":"Montgomery Burns","user_id":8}
            ]
        };

    dojo.addOnLoad(function() {
        var userStore = new dojo.data.ItemFileReadStore({
            //url: "/user/lookup",
            data: user_data
        });
        var filteringSelect = new dijit.form.FilteringSelect({
            id: "userselect",
            name: "userselect",
            store: userStore,
            searchAttr: 'label' //["first_name", "last_name", "oasis"]
        },
        "userselect");
    });
</script>
like image 676
AntiEgo Avatar asked May 10 '10 18:05

AntiEgo


1 Answers

You'll need to set queryExpr and set autoComplete to false

var filteringSelect = new dijit.form.FilteringSelect({
  id: "userselect",
  name: "userselect",
  store: userStore,
  searchAttr: 'label',
  queryExpr: '*${0}*',
  autoComplete: false
},"userselect");

Dojo documentation for queryExpr:

This specifies what query is sent to the data store, based on what the user has typed. Changing this expression will modify whether the results are only exact matches, a "starting with" match, etc. dojo.data query expression pattern. ${0} will be substituted for the user text. * is used for wildcards.

${0}* means "starts with"
*${0}* means "contains"
${0} means "is"

like image 79
Richard Ayotte Avatar answered Sep 21 '22 01:09

Richard Ayotte