复制谷歌的自动完成与jQuery自动完成

Question

试图完成与jquery.googleSuggest.js是给了我很多的麻烦可以看出here上述结果。一些jQuery UI的原始CSS看起来很难受。任何有关最优雅的方式来解决这个问题的任何提示？ （以及如何添加灰色的 “斗争” 后， “咕” 在上面的截图中的行为吗？）

HTML

<div class="suggestions_box"> 
    <ul> 
    <li>f<b>acebook</b></li> 
    <li>f<b>unda</b></li> 
    </ul> 
    </div> 

JS

var div = $("<div>").appendTo("#inputs") 
    , input = $("<input>").appendTo(div); 
    input.googleSuggest({ service: "web" }); 

Answer 1

您的自定义在链接的小提琴CSS正在制造问题。删除所有的CSS并添加外部jquery-ui.css使下拉菜单正确显示（如this fork of your fiddle所示）。

基本上，你只需要：

// html placeholder for the input 
<div id="inputs"></div> 

和

// js init code 
var input = $("<input>").appendTo($("#inputs")); 
input.googleSuggest({ service: "web" }); 

而且，你的其他问题已经在这个线程回答：How to implement a google suggest-like input field?这是一个巧妙的方法通过覆盖两个输入字段一个完成高于另一个，较低的一个被禁用并且被设置为第一建议条目的值。