使用jquery自动完成和工具提示

Question

如何显示自动完成和工具提示？

谢谢大家。

Answer 1

只是

http://docs.jquery.com/Plugins/autocomplete

有一些CSS功能。您可以使用Chrome > Inspector查看他们添加哪种样式来创建此类UI＆amp; f

修改

基本上它是在jquery中悬停绑定

$("li").hover(fn);

并在此示例（wowhead.com）中，他们调用了一个链接，该链接是autocomplete div的一部分

<div class="live-search-icon" style="background-image: 
url(http://static.wowhead.com/images/wow/icons/small/inv_misc_head_dragon_black.jpg); ">
    <div>
       <a href="/item=19003" class=" q4">
        <i>Item</i>
        <span>Head of Nefarian</span>
       </a>
    </div>
</div>

和jquery对这个网址进行.ajax()调用：/item=19003&power

返回的数据在json中

$WowheadPower.registerItem('18422', 0, {
name_enus: 'Head of Onyxia',
quality: 4,
icon: 'INV_Misc_Head_Dragon_01',
tooltip_enus: '<table><tr><td><b class="q4">Head of Onyxia</b><br /><!--bo-->Binds when picked up<br />Unique<br /><a href="/quest=7490" class="q1">This Item Begins a Quest</a><br />Requires Level 60<br />Item Level 60</td></tr></table><table><tr><td><span class="q">&quot;The head of the Black Dragonflight\'s Brood Mother&quot;</span></td></tr></table>'
});

它们以div显示，相对于鼠标指针位置

我没有提取确切的代码，但有可能，他们的.js文件只是压缩而不是混淆

Answer 2

您可以使用“title”属性：

    $(function() {
        //field desc -> is the "tooltip"
        var availableTags = [
            { label: "Choice1", value: "value1", desc: "descricao 1" },
            { label: "Choice2", value: "value2", desc: "descricao 2 bla bla bla" },
            { label: "Choice3", value: "value3", desc: "descricao 3 ble" },
            { label: "Choice4", value: "value4", desc: "descricao 4 bli bli bli" }
        ];
        $( "#tags" ).autocomplete({
            source: availableTags,
            focus: function( event, ui ) {
                $(".ui-autocomplete > li").attr("title", ui.item.desc);
            }
        });
    });

https://jsfiddle.net/m02suadf/

您可以使用jquery-ui中的“工具提示”（在1.9版中添加）在Internet上找到其他示例。