CODEWITHSUNDEEP
jqueryasp.net
Karthik B.P
Karthik B.P

Reputation: 1

Textbox which should have both Autocomplete and able to type our text

I have a textbox which should have autocomplete where I will be binding name as value and id as email-id. And I want to type any email-id in this textbox.

Direct Question: I want the same as "To" address textbox which is in gmail or microsoft account.

This textbox is used to fill email address before sending. I have a list which will bind the names and email-id, but if i want another email-id to type it is not possible.

Upvotes: 0

Views: 47

Answers (2)

potatopeelings
potatopeelings

Reputation: 41075

You can use Selectize.js at http://brianreavis.github.io/selectize.js/ - check the Email Contacts example.

Upvotes: 0

Anwar
Anwar

Reputation: 4246

You can use Autocomplete object from JQuery UI Official Website to perform this task :

$(function() {
  var toAdresses = [ // Should be populated thanks to AJAX call to database of To-adresses
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
  ];
  
  // Setting autocomplete functionality
  $("#input_text_to").autocomplete({
    source: toAdresses
  });
});
<!DOCTYPE html>
<html>
  <head> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
  </head>
  <body>
    <input type="text" placeholder="To..." id="input_text_to" />
  </body>
</html>

Upvotes: 2

Related Questions