How to use dojo On with Dojox Searchbox?

Question

I am following this link http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/SearchBox.html and am trying to do the same in my app. The only difference is that I want to use "onSearch" event using "dojo On" but I am not able to read results, query, options that we get by default in the onSearch function.Please help me in solving this problem.

My HTML code:

 <input data-dojo-type="dojox/mobile/SearchBox" type="search" placeHolder="Search"
 data-dojo-props='store:store, searchAttr: "label", ignoreCase: true, pageSize:2'> 

<ul data-dojo-type="dojox/mobile/RoundRectList" jsId="list"></ul>

My JS code:

    define(["dojo/has",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/dom",
    "dojo/dom-class",
    "dojo/dom-construct",
    "dojo/query",
    "dojo/dom-style",
    "dojo/dom-attr",
    "dojo/on",
    "dojo/_base/Deferred",
    "dojo/topic",
    "dojo/_base/connect",
    "dijit/registry",
    "dojo/store/Memory",
    "dojox/mobile/SearchBox",
    "dojo/selector/acme"
    ],
   function(has,declare,lang,array,dom,domClass,domConstruct,query,domStyle,domAttr,on,Deferred,topic,connect,registry,MemoryStore,SearchBox)
   {

   declare("controllers.SearchController", [], {
           started:false,
           constructor : function(args) {
           WL.Logger.debug("SearchController created");
           lang.mixin(this,args);
           },

           start:function(){

               if(!this.started)
               {

               console.log("i am in SearchController.start");

               this.subscription();
               this.started = true;

               }
               },

           subscription:function(){

               store = new MemoryStore({data: [
                                               {label: "Alabama"},
                                               {label: "Alaska"},
                                               {label: "American Samoa"},
                                               {label: "Arizona"},
                                               {label: "Arkansas"},
                                               {label: "Kansas"},
                                               {label: "Kentucky"}
                                             ]});



               var searchbox=registry.byId("searchbox");
              on(searchbox.domNode,"search",lang.hitch(this,this.onSearch));       

           },

           onSearch: function (results, query, options) {

          //  this.onSearch = function () {};
            console.log(results);

        }

           });
   return controllers.SearchController;
   }
   );

Also, I am following this link dojox/mobile/SearchBox 'onSearch' event runs twice on webkit to use the workaround for dojox searchbox. How can I implement it in my case?

Answer 1

You should never try to access widget events through DOM nodes. There is a difference between widgets and DOM nodes, and this is one of them. Also, because dojo/on can only be used with DOM nodes and DOM events, you cannot use it to handle the onSearch event.

Every widget has a on() function that you can use to attach widget event handlers. For example:

searchbox.on("search", lang.hitch(this, this.onSearch));

---

If the event runs twice, you can try doing something like this (you will probably have to rewrite this in your object oriented design):

var myEventHandler = searchbox.on("search", lang.hitch(this, this.onSearch());
myEventHandler.remove();

According to the API documentation the return value of the on() function is undefined, but this topic its stated that it returns an object containing a remove() function able to remove the event listener.

---

I don't think it's possible. If you want to retrieve data from your database/webservice, you could use the dojo/store/JsonRest store (RESTful webservices) or you could implement your own store (or fetch the data and put it in a dojo/store/Memory).

Dojo chooses for an abstraction layer upon your data implementation called the store API. The advantages of these are that, because it's an abstraction layer, that you can use your store for multiple purposes (all Dijit widgets, Dojo mobile widgets, ...) work in a similar way that they use a store.

Answer 2

Concerning this part of your question:

I am following this link dojox/mobile/SearchBox 'onSearch' event runs twice on webkit to use the workaround for dojox searchbox. How can I implement it in my case?

I do not think such a workaround is needed. As I wrote in this answer, as long as you have a store specified, SearchBox.onSearch() should be called only once.

In short: just do not apply this workaround, it shouldn't be necessary.

Answer 3

In addition to the event mistake pointed out by Dmitri, there's an issue with the order of execution.

When does Dojo parse your HTML? Do you have parseOnLoad:true in your dojoConfig (or data-dojo-config)?

When the parser reaches data-dojo-type="dojox/mobile/SearchBox", it will try to instantiate a SearchBox widget. Because you have specified store:store in its properties, it will look for a variable called store.

Now, the store variable itself gets instantiated in your SearchController. So you have to make sure that subscription() is called before the parser runs. However, the subscription() method in turn tries to look for a widget called "searchbox". So the parser has to be called before subscription(). As you can tell, this isn't going to work :)

So you have to rewrite the SearchController a bit. For example, you can remove the store:store from data-dojo-props, and let the controller set it in the subscription method:

var store = new MemoryStore({data: [....]});
var searchbox = registry.byId("searchbox");

searchbox.set("store", store);
searchbox.on("search", lang.hitch(this, this.onSearch)); // See Dmitri's answer.