jQuery UI Autocomplete не отображается на Joomla 2.5

Question

Я на самом деле программирую пользовательский компонент в Joomla 2.5.4, и я добавил JQuery (версия 1.7.2) и jQuery Ui (версия 1.8.20). На самом деле я использую jQuery Ui Tabs без каких-либо проблем, и я пытаюсь использовать jQuery Ui Autocomplete с помощью строки 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"/> 

Это как Я пытаюсь использовать пользовательский интерфейс автозаполнения:

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