Question

我无法修改书籍中的脚本（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);
}
});
});

任何有关更好的书籍或更好的方法的建议都会受到欢迎:)

Answer 1

我通过从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的限制。

使用PHP生成的XML使用jQuery Autocomplete Widget将ID添加到ul / li

1 个答案: