Joomla 2.5 上不显示 jQuery UI 自动完成功能

Question

我实际上是在 Joomla 2.5.4 中编写自定义组件，并且添加了 JQuery（1.7.2 版）和 jQuery Ui（1.8.20 版）。实际上，我正在使用 jQuery Ui 选项卡没有任何问题，并且我正在尝试使用 jQuery Ui 自动完成和从 Joomla 中的模型加载的 JSON 字符串。 如果我尝试在“输入框”中输入某些内容，则什么也没有发生（自动完成功能不起作用或显示任何建议），但这很奇怪，因为当我在输入中写入内容时，我的组件被调用（实际上我是使用 xDebugger 和 Eclipse PDT）。

它首先调用 Mootools，然后我添加了 jQuery js，并编写了 jQuery.noConflict，并且，正如我所说，Ui Tabs 可以正常工作。

这是我的 joomla 视图中的一个函数，它将 js 推送到模板中：

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 函数中放置一个 Alert 以查看它的代码是否正常工作，这很奇怪，因为此警报仅在页面加载时显示，而不是在我输入时显示。

问题是：我做错了什么？

我们很乐意接受所有答案。

Answer 1

确保 jsonProducts 是对象数组，而不是 json 字符串（如果是字符串，请使用 $.parseJSON）。

至于您的问题，jQuery ui 在搜索匹配项时会查找value.label || value.value || value（其中value 是该项），这意味着您需要在您的产品项中包含value: "xxx" 或label: "yyy"，例如实例：

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

要转换您的数据，您可以：

$.each(jsonProducts, function(i, obj) {
    obj.value = obj.productTypeDesc
});