JQuery autocomplete suggestions not sorted

Question

I am having a problem with sorting an auto-complete result with JQuery UI.

from the image above when a user decides to search for garlic and starts by entering "g" it should show "garlic" first and not egg first.

See my code. The ingredients in ingredient.txt at a point is sorted alphabetically so i think that is where the problem is..

How do I go about this

$(function() {
    jQuery.get('ingredients.txt', function(data) {
        var availableTags = data.split(', ');   
        availableTags = availableTags.sort();           
        //console.log("The available Tag are "+ availableTags);
        function split( val ) {
            return val.split(",");
        }
        function extractLast( term ) {
            return split( term ).pop().sort();
        }   
        // don't navigate away from the field on tab when selecting an item                  
        $( "#tags" ).bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).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
                // var projectDiv = '<div class="projectBody" id="selectedItems">'+ ui.item.value +'</div>';
                terms.push( ui.item.value );                                  
                for(var i = 0; i < terms.length; i++) {
                    var elements = terms[i];                        
                }
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                //$("#tags").val().wrap( "<div class='new'>nn</div>" );
                this.value = terms.join( "," );                               
                return false;
            }
        });
    });
});

Answer 1

After much looking this is what i came up with.

<script type="text/javascript">

                    $(function() {
                        jQuery.get('ingredients.txt', function(data) {
                        var availableTags = data.split(', ');   
                        availableTags = availableTags.sort();           
                        //console.log("The available Tag are "+ availableTags);
                        function split( val ) {
                          return val.split(", ");
                        }
                        function extractLast( term ) {
                          return split( term ).pop();
                        }                        
                        $( "#tags" )
                          // don't navigate away from the field on tab when selecting an item
                          .bind( "keydown", function( event ) {
                            if ( event.keyCode === $.ui.keyCode.TAB &&
                                $( this ).autocomplete( "instance" ).menu.active ) {
                              event.preventDefault();
                            }
                          })
                          .autocomplete({
                            minLength: 0,
                            source: function( request, response ) {
                              var term = $.ui.autocomplete.escapeRegex(extractLast(request.term))
                                    // Create two regular expressions, one to find suggestions starting with the user's input:
                                    , startsWithMatcher = new RegExp("^" + term, "i")
                                    , startsWith = $.grep(availableTags, function(value) {
                                        return startsWithMatcher.test(value.label || value.value || value);
                                    })
                                    // ... And another to find suggestions that just contain the user's input:
                                    , containsMatcher = new RegExp(term, "i")
                                    , contains = $.grep(availableTags, function (value) {
                                        return $.inArray(value, startsWith) < 0 &&
                                            containsMatcher.test(value.label || value.value || value);
                                    });            

                                // Supply the widget with an array containing the suggestions that start with the user's input,
                                // followed by those that just contain the user's input.
                                response(startsWith.concat(contains));
                            },
                            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
                             // var projectDiv = '<div class="projectBody" id="selectedItems">'+ ui.item.value +'</div>';
                              terms.push( ui.item.value );                                
                              for(var i = 0; i < terms.length; i++)
                                {
                                    var elements = terms[i];                        
                                }
                              console.log('<div class="projectBody" id="selectedItems">'+ ui.item.value +'</div>');
                              $("#selectedItems").css("backgroundColor", "blue");                         
                              // add placeholder to get the comma-and-space at the end
                              terms.push( "" );                           
                              this.value = terms.join( "," );                                 
                              return false;
                            }
                          });
                      });
                });

                </script>