Question

I’m actually programming a custom component in Joomla 2.5.4, and i’ve added JQuery (ver. 1.7.2) and jQuery Ui (Ver. 1.8.20). Actually i’m using jQuery Ui Tabs without any problem and i’m trying with jQuery Ui Autocomplete with a JSON String that loads from a Model in Joomla.
If i try to type something in the “inputbox” nothing happened (the autocomplete doesn’t works or show up any suggestion), but it’s quite strange because while i’m writing something in the input my component is called (actually i’m working with xDebugger and Eclipse PDT).

Mootools it’s calling first and then i’ve added jQuery js and i’ve wrote the jQuery.noConflict, and, as i said, Ui Tabs works without any problem.

This is a function in my joomla view that pushes the js’s into the template:

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

The piece of template that i’m using it’s quite simple:

<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"/>

This is how i am trying to use the ui autocomplete:

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

I’m using a JSON That is loaded in the template, and has the form:

{\"productTypeCode\" : \"1\", \"productTypeDesc\" : \"2 ETIL HEXIL ACETATE\"},...

I’ve tried to put an Alert in the js Function to see if the code it’s working, and it’s strange, because this alert show’s only on Page Load, and not while i’m typing.

The question is: what i’m doing wrong?

All answers are gladly accepted.

Answer 1

Make sure jsonProducts is an array of objects, and not a json string (use $.parseJSON if it is a string).

As for your problem, jQuery ui looks for value.label || value.value || value when it searches for matching items (where value is the item), which means you need to have value: "xxx" or label: "yyy" in your product items, for instance:

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

To convert your data you can do:

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