Is it possible to use modification of .autocomplete()?

Question

I am working on my userscript (Tampermonkey - Google Chrome extension). I have got <ul> in my .dialog() and this <ul> is filled by some data. Except this I have got <input> element, which is used as a search box.

Now I need some jQuery function like autocomplete. I am trying this: When I start writing into that input, I wanna show only possible matches in my <ul>. So when I star writing into that input, I wanna hide all <li> which is not a possible match of my search string.

Array jp_tpl is my array of elements, which is loaded into that <ul>

function JPTemplate(id, title, source, data){
    return {
        id:id,
        title:title,
        source:source,
        data:data
    }
}  
jp_tpl.push(JPTemplate(0, "Neprodlužování služeb", GM_getResourceText("tpl_neprodluzovani_sluzeb")));
jp_tpl.push(JPTemplate(1, "AV Upozornění", GM_getResourceText("tpl_av_upozorneni")));
jp_tpl.push(JPTemplate(2, "Daňový doklad", GM_getResourceText("tpl_danovy_doklad")));
jp_tpl.push(JPTemplate(3, "Děkujeme za dobré zprávy", GM_getResourceText("tpl_dekujeme_za_dobre_zpravy")));
jp_tpl.push(JPTemplate(4, "Poděkování - ukončení služeb", GM_getResourceText("tpl_podekovani_ukonceni_sluzeb”)));
jp_tpl.push(JPTemplate(5, "Poděkování - provedená platba", GM_getResourceText("tpl_podekovani_provedena_platba”)));
jp_tpl.push(JPTemplate(6, "Storno objednávky", GM_getResourceText("tpl_storno_objednavky")));
jp_tpl.push(JPTemplate(7, "Provedeno dle požadavku", GM_getResourceText("tpl_provedeno_dle_pozadavku")));
jp_tpl.push(JPTemplate(8, "Doména byla převedena pod naši správu", GM_getResourceText("tpl_domena_byla_prevedena_pod_nasi_spravu")));

and here is my <ul>

$('body').append('<div class="ui-dialog" id="jp_main_menu"> \
                    <ul id="jp_templates_settings"> \
                        <li><input type="button" id="jp_templates_settings_btnpos" value="Výchozí poloha tlačítka"></li> \
                        <li><input type="button" id="jp_templates_settings_btnpin" value="Připíchnout tlačítko" title="tlačítko zůstane přesně tam, kde je nyní umístěno"></li> \
                        <li><input type="button" id="jp_templates_settings_btncls" value="Schovat tlačítko" title="při příštím načtení stránky se opět zobrazí"></li> \
                    </ul> \
                    <ul id="jp_templates_sort_links"> \
                        <li><input id="jp_sort_search" type="text" placeholder="vyhledat template ..."  /></li> \
                        <li><a class="jp_sort" id="jp_sort_def" href="">Seřadit DEF</a></li> \
                        <li><a class="jp_sort" id="jp_sort_az" href="">Seřadit A-Z</a></li> \
                        <li><a class="jp_sort" id="jp_sort_za" href="">Seřadit Z-A</a></li> \
                    </ul> \
                    <ul id="jp_templates_list"></ul> \
                 </div>');

I am beginner in jQuery. Can you help me pls? You can post any links / tutorials or for example ... name of that thing, what I need :D I tried to search "autocomplete" with different modifications, but I not found anything usefull.

Thanks a lot

Answer 1

Problem solved.

I found this plugin jQuery FastLiveSearch and this is what I need