jQuery UI自动完成不显示在Joomla 2.5

Question

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

问题是：我做错了什么？

所有的答案很乐意接受。

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 
});