jQuery UI自动完成

Question

I am trying to get my jQuery UI Autocomplete to work the way I want it but I am not very sure what to do. First I can't get the loading to get working in the input field. I also want jQuery to match the search results by first letter so for example if the source is

apple cola tea carrot

so when you type A it matches any word with "A" first and if you are searching for say "cola" jQuery would highlight each letter as you type in the results portion so you type "co" it will be highlighted here is my current code

$("#ui_query").autocomplete({ autoFocus: true });
$("#ui_query").autocomplete({ disabled: false });
$("#ui_query").autocomplete({ minLength: 2 });

    $(".ui-autocomplete-loading").ajaxStart(function(){
    $(this).show();
    });

    $(".ui-autocomplete-loading").ajaxStop(function(){
    $(this).hide();
    });

    $(document).ready(function() {
    $("#ui_query").autocomplete({
    source: [
             "Bleach",
             "Naruto",
             "Level E",
             "Kore wa Zombie desu ka",
             "Onii-chan no Koto Nanka Zenzen Suki Janain Dakara ne!!",
             "Mobile Suit Gundam SEED Destiny",
             "Mobile Suit Gundam SEED",
             "One Piece",
             "Freezing",
             "To Aru Majutsu No Index 2",
             "IS: Infinite Stratos",
             "Gosick",
             "Mahou Shoujo Madoka Magica",
             "Yumekui Merry",
             "Hyakka Ryouran: Samurai Girls",
             "After War Gundam X",
             "Mobile Suit Gundam",
             "Mobile Suit Gundam 00",
             "Fullmetal Alchemist: Brotherhood",
             "Fullmetal Alchemist",
             "Tengen Toppa Gurren Lagann",
             "Code Geass: Hangyaku no Lelouch",
             "11eyes",
             "Code Geass: Hangyaku no Lelouch R2",
             ]
    });
    });

thanks in advance

Answer 1

It looks like the jQuery UI autocomplete plugin doesn't support formatting of results before display, unlike it's predecessor. You can see the complete list of features dropped and the equivalent of other features here.

You can however simulate that effect by writing a custom handler for data. Here is an official demo that does what you want - the source is available.

This question on SO asked the same thing and monkey-patching the plugin was suggested.