0

I want to highlight results from autocomplete function but i don't know where i must put the code for highlight function. Sorry, I am a beginner in using codeigniter and jquery.

So this is my jquery code:

<script type="text/javascript">
$(document).ready(function(){
    function split( val ) {
        return val.split( /,\s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }
    $( "#tempo" )
    // 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({
        source: function( request, response ) {
            $.getJSON( "<?php echo base_url();?>index.php/admin/library/autocomplete_tempo",{
                term: extractLast( request.term )
            },response );
        },
        search: function() {
            // custom minLength
            var term = extractLast( this.value );
            if ( term.length < 1 ) {
                return false;
            }
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
         options: {
            highlightClass: "tempo"
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
        }
    });         
});
</script>

With this function, i only get result like this :

enter image description here

The result is not populate like what i type in the input field. It's only show all data in my tempo category database.

So. I want to ask. Where the renderItem function i must put on that script so when i type 'A' it will display highlighted result with 'a' words like :

  • Larghissimo
  • Grave
  • Largo
  • Adagio
  • Andante
  • Allegro Moderato

And when i complete type 'Andante', the result of autocomplete will only show 'Andante'.

Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • 1
    Possible duplicate of [jQueryUI: how can I custom-format the Autocomplete plug-in results?](http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results) – Popnoodles Dec 12 '15 at 22:23
  • Also http://stackoverflow.com/questions/3344804/how-to-make-matched-text-bold-with-jquery-ui-autocomplete – Popnoodles Dec 12 '15 at 22:23
  • Also http://stackoverflow.com/questions/4107195/highlight-jquery-ui-autocomplete – Popnoodles Dec 12 '15 at 22:23

0 Answers0