Question

我实际上是在Joomla 2.5.4中编写自定义组件，我添加了JQuery（版本1.7.2）和jQuery Ui（版本1.8.20）。实际上我正在使用jQuery Ui Tabs没有任何问题，我正在尝试使用jQuery字符串从Jom字符串加载，该字符串从Joomla中的模型加载。如果我尝试在“输入框”中输入内容，则没有任何事情发生（自动完成功能不起作用或显示任何建议），但这很奇怪，因为当我在输入中写一些内容时，我的组件被调用（实际上我是使用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来查看它的代码是否正常工作，这很奇怪，因为这个警报只显示在Page Load上，而不是在我输入的时候。

问题是：我做错了什么？

很高兴接受所有答案。

Answer 1

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

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

label: "yyy"

要转换数据，您可以执行以下操作：

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

jQuery UI自动完成功能不会出现在Joomla 2.5上

1 个答案: