I'm trying to write a simple search server, using Django with AJAX. The server itself works fine, but I am still struggling with adding autocomplete to the search widget.
(I don't want to use available Django snippets, since they don't do exactly what I want, are hard to customize, and don't teach me the basics the way writing the interface from scratch does)
On the client (Javascript) side, I'm using YUI because it looks simpler - but don't mind switching to jQuery, so please don't fixate on that.
In YUI, an autocomplete box takes three parameters: input,container and dataSource. The first two are just the widgets, and the third one is interesting.
If I write:
var oDS = new YAHOO.util.LocalDataSource(["apples","apples2", "broccoli", "cherries"]);
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
in my <script>
, I get an autocomplete box which autocompletes these terms.
When I try to replaces the LocalDataSource with a remote datasource, for example by choosing var oDS = new YAHOO.util.ScriptNodeDataSource("127.0.0.1:8000/getNames/")
, and setting up an apropriate view, no autocomplete happens.
What I know about the problem:
- I know that the view gets called (by debug printing) - so that isn't the problem.
- I return a json array by
jresponse = simplejson.dumps(response_array); return HttpResponse(jresponse, mimetype='application/javascript');
I don't think there's any problem with that, since I can access that view directly and get a textual representation of the json when I do. - Maybe there's a problem with the input-type that the local data source expects - I'm not sure how to set it.
Any help (including how to do this correctly in jQuery - I don't mind dumping YUI) would be much appreciated.
Edit: After the first two comments (thanks!), I installed firebug, and started playing with it. It's really messy, however, since the Yahoo toolbar has lots of code, and I don't know where to break it. Is there some easy way to have firebug only show me json/xml elements?
@Marat: I did that already (accessing my view), and it returns a string representation of the JSON (at least that's what my browser shows). Is that what I should expect?
@pastylegs: Here's the code:
<div id="myAutoComplete">
<input id="myInput" type="text">
<div id="myContainer"></div>
</br></br>
<input type="submit">
</div>
<script type="text/javascript">
YAHOO.example.BasicLocal = function() {
{%block oDS%}
// Use a LocalDataSource
var oDS = new YAHOO.util.LocalDataSource(["apples","apples2", "broccoli", cherries"]);
//for remote - oDS = new YAHOO.util.ScriptNodeDataSource("127.0.0.1:8000/getNames/")
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oAC.prehighlightClassName = "yui-ac-prehighlight";
oAC.useShadow = true;
return {
oDS: oDS,
oAC: oAC
};
}();
</script>
The Django view:
def getNamesXML(request):
response_array=['Apples','Oranges']
print response_array
jresponse = simplejson.dumps(response_array)
print jresponse
return HttpResponse(jresponse, mimetype='application/javascript')
Thanks a lot!