0

私は実際に Joomla 2.5.4 でカスタム コンポーネントをプログラミングしており、JQuery (ver. 1.7.2) と jQuery Ui (Ver. 1.8.20) を追加しました。実際、私は問題なくjQuery Ui Tabsを使用しており、JoomlaのモデルからロードするJSON文字列を使用してjQuery Ui Autocompleteを試しています。「入力ボックス」に何かを入力しようとしても何も起こりません (オートコンプリートが機能しないか、提案が表示されません)。 xDebugger および Eclipse PDT での作業)。

最初に Mootools を呼び出してから、jQuery js を追加し、jQuery.noConflict を作成しました。前述のように、Ui タブは問題なく動作します。

これは、js をテンプレートにプッシュする joomla ビューの関数です。

private function setTemplateAttributes($document){
        $app = JFactory::getApplication();
        $tp = $app->getUserState('product.Types');
        $products = addslashes(base64_decode($tp["types"]));
        $document->addStyleSheet(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/css/smoothness/jquery-ui-1.8.20.custom.css");
        $document->addStyleSheet(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/development-bundle/themes/smoothness/jquery.ui.autocomplete.css");
        JHTML::_("behavior.mootools");
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/js/jquery-1.7.2.min.js");
        $document->addScriptDeclaration('$j = jQuery.noConflict();');
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/js/jquery-ui-1.8.20.custom.min.js");
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/development-bundle/ui/jquery.ui.core.js");
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/development-bundle/ui/jquery.ui.widget.js");
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/development-bundle/ui/jquery.ui.autocomplete.js");
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/jQueryUi/development-bundle/ui/jquery.ui.position.js");
        $document->addScriptDeclaration('onReadyDocument();');
        $document->addScriptDeclaration("loadProducts(\"$products\")");
        $document->addScript(JURI::root(true)."/components/com_mercurio/assets/js/jGui.js");

        return $document;
    }

私が使用しているテンプレートは非常に単純です。

<label for="ptCode">Product Type</label>
<input id="ptCode" name="ptCode" type="text" size="6" maxlength="6"/>
<input id="dsProduct" name="dsProduct" type="text" size="25" maxlength="25"/>

これは、UIオートコンプリートを使用しようとしている方法です:

function loadProducts(jsonProducts){
            $j("#ptCode").autocomplete({
                source: jsonProducts,
                minLength: 2,
                select: function (event, ui){
                    $j("#ptCode").val(ui.item.data.productTypeCode);
                    $j("#dsProduct").val(ui.item.data.productTypeDesc);
                }
            });
}

テンプレートにロードされ、次の形式の JSON を使用しています。

{\"productTypeCode\" : \"1\", \"productTypeDesc\" : \"2 ETIL HEXIL ACETATE\"},...

コードが機能しているかどうかを確認するために js 関数にアラートを入れようとしましたが、奇妙なことに、このアラートはページの読み込み時にのみ表示され、入力中は表示されません。

問題は、私が間違っていることは何ですか?

すべての回答は喜んで受け入れられます。

4

1 に答える 1

0

jsonProductsが json 文字列ではなく、オブジェクトの配列であることを確認してください(文字列$.parseJSONの場合に使用します)。

あなたの問題に関しては、jQuery ui は、一致するアイテム (アイテムがどこにあるか) をvalue.label || value.value || value検索するときに探します。valuevalue: "xxx"label: "yyy"

[{
  productTypeCode: 1, 
  productTypeDesc: "2 ETIL HEXIL ACETATE", 
  value: "2 ETIL HEXIL ACETATE"
}, {
  ...
}]

データを変換するには、次のことができます。

$.each(jsonProducts, function(i, obj) {
    obj.value = obj.productTypeDesc
});
于 2012-05-27T17:17:00.507 に答える