jQuery UI自動完成不顯示在Joomla 2.5

我實際上是在Joomla 2.5.4編程一個自定義組件，並且我添加了JQuery（版本1.7.2）和jQuery Ui（版本1.8.20 ）。其實我使用jQuery Ui Tabs沒有任何問題，我想用jQuery Ui自動完成與JSON字符串從Joomla中的模型加載。如果我嘗試在「輸入框」中輸入某些內容（自動完成不起作用或顯示任何建議），但它很奇怪，因爲當我在輸入中寫入內容時，我的組件被調用（實際上， m與xDebugger和Eclipse PDT一起工作）。jQuery UI自動完成不顯示在Joomla 2.5

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功能，看看它的代碼的工作，這是奇怪的，因爲該警報顯示只有頁面加載，而不是當我打字。

問題是：我做錯了什麼？

所有的答案很樂意接受。

來源

2012-05-27 Alejandro Echeverri

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

來源

2012-05-27 17:17:00 ori

正如你說的，我對待JSON作爲一個字符串，而不是作爲一個對象。我用$ .parseJSON嘗試過，自動完成工作得很好！而且，我不知道jQuery UI尋找「值」屬性。我會更仔細地查看文檔。謝謝 –

jQuery UI自動完成不顯示在Joomla 2.5

回答

相關問題