Question

I’m having trouble modifying a script from a book (jQuery UI by Eric Sarrion), the book sets up a database (mysql), which outputs an xml document formatted as

<books>
<li>
<title>Annie</title>
<picture>annie.jpg</picture>
</li>
</books> 

Because I want to pass the autocomplete result to script which loads details on “annie”, I want to pass the database ID rather than a title, so modified the database to include an id, then altered the output xml to

<books>
<li>
<id>123456</id>
<title>Annie</title>
<picture>annie.jpg</picture>
</li>
</books> 

I have further altered the code so it adds the attr id=”123456″ to the li tag of autocomplete, like this

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 209px; left: 969px; display: block; width: 400px;">
<li class="ui-menu-item" role="menuitem" **id="123456"**>
<a class="ui-corner-all" tabindex="-1">
<img src="./annie.jpg" height="30">
<span style="position:relative;top:-7px;left:10px">Annie</span>
</a>
</li>
</ul>

However I am now having trouble putting the ID into a hidden form input, ready to pass to the details script.

I was hoping to be able to do something like

select:function(event, ui) {
    console.log("Name: " + ui.item.value + " Id: " + ui.item.id);
}

The more I read this book, the more I think it was a mistake, there are many many html errors, some php errors, poor formatting. I’m not sure if its just my background in server side languages or this book which is making this so difficult.

The jQuery code is as follows.

// JavaScript Document
$(document).ready(function() {
$("input#search-text").autocomplete ({
source : function (request, callback){
var data = { term : request.term };
$.ajax ({
url : "./action.php",
data : data,
complete : function (xhr, result){
if (result != "success") return;
var response = xhr.responseXML;
var books = [];
$(response).find ("li title").each (function ()
{books.push ($(this).text ());});
callback (books);
var $ul = $("input#search-text").autocomplete ("widget");
$(response).find ("li picture").each (function (index) {
var src = $(this).text () || "default.jpg";
$ul.find ("li:eq(" + index +") a").wrapInner ("<span style=position:relative;" + "top:-7px;left:10px></span>").prepend ("<img src=./images/" + src + " height=30 />");});
$(response).find ("li id").each (function (index) {
    var id = $(this).text () || "0";
    $ul.find("li:eq("+index+")").attr('id',id);
});
}
});
},
open : function (event){
var $ul = $(this).autocomplete("widget");
$ul.blur(function(event) {});
$ul.show ().slideDown (600);
$ul.css ("width", "400px");
},
select:function(event, ui) {
    console.log("Selected: " + ui.item.value + " aka " + ui.item.id);
}
});
});

Any suggestions for better books or a better way of doing this would be welcome 🙂

Answer 1

I solved this problem by switching from xml to json, was a bit of a hassle but using this code instead now…

//autocomplete code
    $("#search-text").autocomplete({
        source: "./action.php",
        minLength: 3,
        delay: 300,
        max:10,

        select: function(event, ui) {
            $('#search-value').val(ui.item.id);
            //$('#picture').val(ui.item.picture);
        }
}).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li />")
            .data("item.autocomplete", item)
            .append("<a><img height='30' src='./images/" + item.picture + "' /><span style=position:relative;" + "top:-7px;left:10px>" + item.label + "</span></a>")
            .appendTo(ul);
}; 


    });

with json output like

[{"id":"123456","value":"annie","picture":"annie.jpg"}]

Because max:10 doesn’t work, I added a limit of 10 to the mysql query.