Textbox autocomplete with DOJO

问题

I am looking for a simple method using DOJO for a textbox autosuggest. The db table that I'll be querying against (using a PHP script, returned as JSON) has over 100,000 records, so this really shouldn't be in the form of a FilteringSelect or a ComboBox as I clearly don't want the user to return the entire data set by clicking on the down arrow.

Other libraries like JQuery and YUI make it dirt simple, but this particularly project is DOJO based and I'm loath to introduce another JS class.

回答1:

It's working!

Even with the 100,000 records that I'm querying against. Return speeds are under 30ms. I even bumped the database size to 500,000 records, and the auto-suggest speeds are very acceptable (still under 120ms). I'm sure I can do even better with a little caching on the PHP side.

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

Here's working DOJO code for an auto-suggest textbox hitting 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 <select id="vendorSelection"></select> somwhere in the body of the page. Works great.

Thanks again!

回答2:

I'm not familiar with how jQuery or YUI do it, but ComboBox and FilteringSelect in Dojo have a pageSize property which can be used to restrict how many items are ever requested at once from the store. You will see no more than that number of items in the drop-down, accompanied by "more choices" and "previous choices" options to page through additional choices, if applicable.

Put that together with a data store that queries the server on each fetch (e.g. dojox.data.QueryReadStore or dojox.data.JsonRestStore) instead of a store that fetches everything once up-front (e.g. dojo.data.ItemFileReadStore), and you should be able to do what you want.

回答3:

Maybe you could make your query return the first X rows. Each new click, return X new rows, skipping X.

来源：https://stackoverflow.com/questions/7871110/textbox-autocomplete-with-dojo

标签

php

autocomplete

dojo