jQuery自动完成建议未排序

经过多看，这就是我想出的。

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