0

本（EricSarrionによるjQueryUI）からスクリプトを変更するのに問題があります。本はデータベース（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>

コードをさらに変更して、次のようにオートコンプリートのliタグにattr id="123456"を追加しました。

<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 に答える