CODEWITHSUNDEEP
javascriptjquerycss
miserable
miserable

Reputation: 727

JQuery Autocomplete Formatting

I am trying to implement a type ahead suggestion text box, and using jQuery autocomplete for the same. It is giving me suggestions, but the suggestion aren't well aligned. They are appearing in a plain text way.

Is there a way to style them properly? Here is what I am referring: https://jqueryui.com/autocomplete/

I tried to replicate the same on JSFiddle, but for some reason it's not showing the suggestions on JSFiddle, but suggestions are working fine in my application.

var email = document.getElementById("cd6bbe49-d1d3-483d-a746-86ed061db3f6_inviteEmail");

email.addEventListener("keyup", getUserAPICall);

function getUserAPICall() {
     var tags = ["test1", "test2", "mytest1", "mytest2", "yourtest1", "yourtest2"];
    var $id = "cd6bbe49-d1d3-483d-a746-86ed061db3f6_inviteEmail";   
      jQuery($id).autocomplete({
      source: tags
    });
}

https://jsfiddle.net/y421ougv/1/

Upvotes: 1

Views: 69

Answers (1)

kumarras
kumarras

Reputation: 146

I checked your jsfiddle. You have not included the jquery libs to your fiddle. So, autocomplete is not working. Add the below 3 libs to your jsfiddle:

I have created a fiddle at jsfiddle Add the below 3 libraries to your jsfiddle:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

You need to add custom css for autocomplete to display there. But it should work fine in the browser after just adding the jquery libs.

Upvotes: 1

Related Questions