Tying a data source from dojo.xhrPost to a text box for autocomplete

I inherited a web app that uses Dojo 1.5 and the template toolkit. I am enjoying learning dojo but it's at a slow pace.

Initially when bringing up our we开发者_如何学JAVAb form, we'll have a list of files on the right side of the page like so....

AAA_text
BBB_text_1
BBB_text_2
CCC_text
....
....

On the left side we have a search box that asks for the subset of file to use. Normally we would just type in "AAA" and then the div on the right side would find those files that match and display them after you press the "Search" key below the box.

What we are looking to do is to eliminate the "Search box" and have the list of files matching "AAA" to come up in the right side div as "AAA" is being typed, (or "BBB" or "CCC", etc).

I suppose in a nutshell it's the equivalent having the "Search" button pressed after every key is typed in the Search box.

Does this sound like a realistic goal or even possible? The code itself uses a ton of Template Tookit so I'm not looking to do any major rewrite.

If I am not making myself clear, let me know. I can elaborate for clarity. Many many thanks! Janie

EDIT: OK, I have solved a good deal of my problem so far and as it turns out, as so many of these things have a propensity to do, that what I am really needing is to get clear on how to make autocomplete work. Which is to say that I have a data source for my text box but not really sure how to tie it to the text box. I have a dojo.xhrPost routine that can handle grabbing the values.

It looks like this....

 dijit.byId('files_matching').getValue(),

Googling dojo autocomplete examples gives me a zillion links and none of which are proving helpful. So I suppose my questions have transitioned to....

1. Can you even use autocomplete on a mere text box (I've seen links that say that you can only use it on combo boxes)

2. Is there a link out there somewhere that describes/shows in detail how to tie a dojo text box to a data source using dojo.xhrPost.

I am so close to solving this and I still seem to have a gaping chasm in front of me.

---

It's difficult to say for sure without seeing your code but if you don't have one already, I would recommend to create an ItemFileReadStore or something similar to start with. That way you can query that store locally on the client without having server requests after every key stroke.

It could look something like this:

var file_store = new dojo.data.ItemFileReadStore({ data: {
  items: [{ name:"AAA_text" },
          { name:"AAA_text_1" },
          { name:"BBB_text_2" }]
}});

When you have that in place you can call a function from your text input's onChange event:

<input type="text" onchange="query_store(this.value);" />

And then you handle to actual query from the function called from the onchange event:

var query_store = function(search_for) {

  var my_query = { name: search_for+"*" }; // * for wildcard match

  completed = function(items, result){
    for(var i = 0; i < items.length; i++){
      var value = file_store.getValue(items[i], "name");
      alert(value); // Instead of alert, you can save the values to your div.
    }
  };

  file_store.fetch({ query: my_query, onComplete: completed });
}

A lot of good information about this can be found here

Hope this is at least a little helpful.