使用jquery自动完成和工具提示 [英] Autocomplete and tooltip with jquery

问题描述

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

How to display the autocomplete and tooltip like this?

谢谢所有。

推荐答案

这只是

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

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

with some CSS features. You can use Chrome > Inspector to see what kind of styles they added to create such UI l&f

编辑

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

Basically it's hover binding in jquery

$（li）。hover（fn）;

在此示例（wowhead.com）中，他们调用的链接是自动完成div的一部分

and in this example (wowhead.com) they call a link which is part of 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

and jquery does an .ajax() call to url like this: /item=19003&power

返回的数据是json

returned data are in 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中，相对于鼠标指针位置定位

and they are displayed in div, positioned relative to mouse pointer position

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

i didn't extracted exact code, but it is possible, their .js files are only compressed, not obfuscated

这篇关于使用jquery自动完成和工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！