0

我在修改书中的脚本（Eric Sarrion 的 jQuery UI）时遇到问题，这本书设置了一个数据库（mysql），它输出一个格式化为的 xml 文档

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

因为我想将自动完成结果传递给加载“annie”详细信息的脚本，所以我想传递数据库 ID 而不是标题，所以修改了数据库以包含一个 id，然后将输出 xml 更改为

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

我进一步更改了代码，因此它将 attr id="123456" 添加到自动完成的 li 标记中，如下所示

<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>

但是，我现在无法将 ID 放入隐藏的表单输入，准备传递给详细信息脚本。

我希望能够做类似的事情

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

这本书越看越觉得是个错误，很多很多html错误，一些php错误，格式不好。我不确定是我在服务器端语言方面的背景还是这本书让这变得如此困难。

jQuery代码如下。

// 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);
}
});
});

欢迎任何关于更好的书籍或更好的方法的建议:)

4

1 回答 1

0

我通过从 xml 切换到 json 解决了这个问题，有点麻烦，但现在改用这段代码......

//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);
}; 


    });

像 json 输出

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

因为 max:10 不起作用，所以我在 mysql 查询中添加了 10 的限制。

于 2013-01-29T03:31:57.703 回答