jQuery UI 자동 완성 Joomla 2.5에 표시되지 않습니다

Question

실제로 Joomla 2.5.4에서 사용자 지정 구성 요소를 프로그래밍하고 JQuery (버전 1.7.2) 및 jQuery Ui (버전 1.8.20). 사실 난 아무 문제없이 jQuery Ui 탭을 사용하고 Joomla있는 모델에서로드 JSON String 함께 jQuery 자동 완성 함께 노력하고있어. "inputbox"에 아무 것도 입력하지 않으면 (자동 완성 기능이 작동하지 않거나 제안 사항이 표시됨) 입력에 뭔가를 쓰고있는 중 (즉, xDebugger와 Eclipse PDT로 작업하고있다).

Mootools 먼저 호출하고 jQuery j를 추가했으며 jQuery.noConflict를 작성했으며 Ui Tabs는 문제없이 작동합니다. 매우 간단

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

내가 그것을 사용하고 템플릿의 조각 것 :

이

템플릿에 JS 년대를 밀어 내 Joomla를보기 기능입니다

<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를 △ ▽를 value.label || value.value || value을 찾습니다 당신은 예를 들어, 제품 항목에 value: "xxx" 또는 label: "yyy"이 필요 의미 (value는 항목입니다) :

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

을

은 당신이 할 수있는 데이터를 변환하려면

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