CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nico.brooks
nico.brooks

Reputation: 63

Replicating google auto complete with jquery autocomplete

https://i.sstatic.net/aqaXN.png

Trying to accomplish the above result with jquery.googleSuggest.js is giving me a lot of trouble as can be seen here. Some of the original CSS of jquery UI seems to be shining tough. Anyone any hints on the most elegant way to fix this? (And how to add the grey "gle", after "goo" behavior in the screenshot above?)

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" });

Upvotes: 0

Views: 241

Answers (1)

vgru
vgru

Reputation: 51322

Your custom css in the linked fiddle is creating problems. Removing all the css and adding external jquery-ui.css makes the dropdown appear correctly (as seen in this fork of your fiddle).

Basically, you only need:

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

and

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

Also, your other question has already been answered in this thread: How to implement a google suggest-like input field? It's a neat trick accomplished by overlaying two input fields one above the other one, with the lower one disabled and set to the value of first suggested entry.

Upvotes: 1

Related Questions