使用jquery自动完成功能复制google自动完成功能

Question

尝试使用jquery.googleSuggest.js完成上述结果给我带来了很多麻烦，我可以看到here。 jquery UI的一些原始CSS看起来很闪亮。有人提出最优雅的解决方法吗？ （以及如何在上面的屏幕截图中添加灰色＆＃34; gle＆＃34;，＆＃34; goo＆＃34;行为？）

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?这是一个巧妙的技巧，通过将两个输入字段叠加在另一个上面，将较低的一个禁用并设置为第一个建议的值条目。