Auto Suggest Dynamic Input Tag

Submitted by rinvizle on Wednesday, September 7, 2016 - 12:00.
In this tutorial we will show you a Auto Suggest Dynamic Input Tag in jQuery. Most of the social media's has a input tag's fields that are commonly used. This project has a autocomplete suggestions generated from the list of JSON queries and jQuery plugins. The system works with a predefined tags in the plugin to work. And for the tags to be work the database from the AJAX will pull and the results to display in the input tags form. This project is a great method for the developers to get in more to the inputs by using predefined tags.

Sample Code

Index.html - This script is for the html forms to display and insert the tags in the page.
  1. <!DOCTYPE html>
  4.   <title>Auto Suggest Dynamic Input Tag</title>
  5.   <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  6.   <link rel="stylesheet" type="text/css" media="all" href="css/styleinput.css">
  7.   <link rel="stylesheet" type="text/css" media="all" href="css/styleinput1.css">
  8.   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  9.   <script type="text/javascript" src="js/jquery.input.js"></script>
  10. </head>
  12. <div id="wrapper" align="center">
  13.         <h1>Auto Suggest Dynamic Input Tag</h1>
  14.         <p>Search and Start Tagging Your Favorite RPG's Games</p>
  15.         <div id="searchbar">
  16.                 <input type="text" id="vidyagames" name="vidya">
  17.         </div>
  18.                 <div id="footer">
  19.                 <div class="bottom_addr">Sourcecodester &copy; 2016</div>
  20.         </div>
  21. </div>
  22. </body>
  23. </html>
And for the Database using the JSON script to response.
  1. <script type="text/javascript">
  2. $(function(){
  3.         $('#vidyagames').tokenInput([
  4.         {id: 7, name: "League of Legends"},
  5.         {id: 11, name: "Dota"},
  6.         {id: 13, name: "Dota2"},
  7.         {id: 17, name: "League of Angels"},
  8.         {id: 19, name: "Run Online"},
  9.         {id: 23, name: "Cabal Online"},
  10.         {id: 29, name: "RF Online"},
  11.         {id: 32, name: "Special Force"},
  12.         {id: 35, name: "Starcraft"},
  13.         {id: 38, name: "God of Wars"},
  14.         {id: 41, name: "Baby Run"},
  15.         {id: 43, name: "Final Fantasy"},
  16.         {id: 44, name: "Resident Evil"},
  17.         {id: 46, name: "Kingdom Hearts"},
  18.         {id: 54, name: "Civilization"},
  19.         {id: 72, name: "Tomb Raider"},
  20.         {id: 77, name: "Crossfire"}
  21.         ], {
  22.         hintText: "Know Of RPG's Games..?",
  23.         noResultsText: "Nothing Found.",
  24.         searchingText: "Gaming...",
  25.         preventDuplicates: true
  26.         });
  27. });
  28. </script>
Hope that you learn from this tutorial and don't forget to Like & Share this project and the website. Enjoy Coding...!
Tags
#CSS
#JavaScript #Web #Jquery
JSON Data
tags
Autosuggest

Add new comment

About text formats
  • 47 views