displaying results from jquery autocomplete

I have a cakephp app that delivers some r开发者_运维百科esults and a php file that nicely formats these results as a table.

in my search page, i use jquery to invoke autocomplete on the cake app. everything is peachy up to this point. i can send in my request, ajax works, i get the formatted html page back. but since im a jquery newbie, i cant figure out how to actually display this result ..

my jquery is something like this

$(document).ready(function() {
     $("input#search").autocomplete(........

sorry dont have the exact codeblock, im at home now...

How do i display the html content i get back from ajax in a div using jquery's autocomplete?

thx a lot

Try pass the returned html page content into a div object via "html".

$('#id-something').html(ajaxResultHtml);

jQuery autocomplete displays the result in the matched element, in this case the input with the id search, but the response of the script must be in JSON notation, as far as I know.

I'm assuming you're using a string as the source so in this case the URL you specify must return JSON data, it can't return HTML. The autocomplete dialog should generate automatically once you do that.

If you want to customize the dialog, you can overwrite _renderMenu and _renderItem. A good example of that is the comboxbox demo on the jQuery UI website

If you really want to stick with div for the dialog, you'll need to overwrite a few functions since the usage of ul and li is hardcoded. If you decide to go this route, don't overwrite the jQuery UI files, extend it otherwise you'll have an update nightmare later on. See Scott González's autocomplete html extension to get started. Once you know how to extend it, you'll need to dig in jquery.ui.autocomplete.js and look for the jQuery UI Menu widget and depending on your modification you'll need to overwrite the refresh, move, first and last functions.

If all you want is to display what you selected into a div, you need to use the select method, this method is triggered when an element in the dialog is selected.

Hopefully this will help you get started.