Autocomplete text field with DOJO

Question

I am looking for a simple method using DOJO to automatically block a text field. The db table with which I will query (using a PHP script returned as JSON) contains more than 100,000 records, so it really should not be in the form of FilteringSelect or ComboBox, since I clearly do not want the user to return the entire data set by clicking down arrow.

Other libraries, such as JQuery and YUI, make it simple, but this project is DOJO, and I don't want to introduce another JS class.

Answer 1

He works!

Even with the 100,000 records I am referring to. The return rate is less than 30 ms. I even ran into a database size of up to 500,000 records, and the auto-negotiation speed is very acceptable (up to 120 ms). I'm sure I can do even better with a little caching on the PHP side.

I ended up using QueryReadStore and FilteringSelect . JsonRestStore may have worked, but I found a simple working example from the dojo site and built it.

This is where dojo code works for a text box with automatic suggestion falling into a very large data set - short and sweet :

var vendorStore = new dojox.data.QueryReadStore({ url: "../vms/htdocs/ajax/search.php" }); var vendorSelect = new dijit.form.FilteringSelect({ name: "vendorSelection", store: vendorStore, autoComplete: false, required: true, labelType: "text", placeHolder: "Search vendors", pageSize: 20, hasDownArrow: false, style: "width: 175px;", searchAttr: "company_name", id: "vendorSelect" }, "vendorSelection"); vendorSelect.startup(); 

Of course, stick with <select id="vendorSelection"></select> somwhere in the body of the page. It works great.

Thanks again!

Answer 2

I am not familiar with how jQuery or YUI do it, but ComboBox and FilteringSelect in Dojo have a pageSize property that can be used to limit how many items are requested directly from the store. You will see no more than the number of elements in the drop-down list, as well as the options “more options” and “previous selection” on the page with additional options, if applicable.

Put this together with the data store that the server requests for each selection (e.g. dojox.data.QueryReadStore or dojox.data.JsonRestStore) instead of the store that retrieves everything that was before (e.g. dojo.data.ItemFileReadStore) and you should be able to do what you want.

Answer 3

Perhaps you could make your query return the first X lines. Each new click returns X new lines, skipping X.