Question

This is my code:
I would like to have a “title” in autocomplete, informing user about some things, so I wanted to use “category”.
But it doesn’t work.
The values in “label” are displayed, but category isn’t.
What is wrong about this code?
Maybe I’m constructing availableTags in the wrong way? But still autocomplete suggests labels…

$(function() {
    var jsonArray = <?php echo $jsonValuesSearch; ?>;
    var availableTags = [];var i=0;
            for (var indeks in jsonArray){
                var pom = {
                    "label"  : jsonArray[indeks],
                    "category" : "Tagi"
                };
                availableTags[i] = pom;
                i++;

            }
    function split( val ) {
                    return val.split( " " );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $( "#tags_search" )
        // don't navigate away from the field on tab when selecting an item
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function( request, response ) {
                // delegate back to autocomplete, but extract the last term
                response( $.ui.autocomplete.filter(
                    availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function( event, ui ) {
                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( " " );
                return false;
            }
        });
});

This is how I create json table:

    $items = Doctrine::getTable('Tags')->findAll()->toKeyValueArray('id', 'name');
    $this->view->jsonValues = Zend_Json_Encoder::encode($items);

Answer 1

When jQuery’s UI Autocomplete gets fed JSON of label: and value:, it displays the label items in the dropdown, and when selected, it sets the value item as the value of the input box. You can have additional things, like category:, in your case. Your select: option has this.value and item.value, but your JSON has no value: – so Autocomplete does not know what to do in select. If you want both label items and category items to show in the dropdown box, you need a success: option with an expression that concatanates them the way you want. Look at the source code in the Autocomplete documentation page for some examples of how to do that. Then just replace your variables in the sequence and punctuation that you want.