PHP Autocomplete Input tags with Dynamic Data using jquery Ajax

In this Post We Will Explain About is PHP Autocomplete Input tags with Dynamic Data using jquery Ajax With Example and Demo.

Welcome on Pakainfo.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to PHP – Input multiple tags with dynamic autocomplete example

In this post we will show you Best way to implement PHP – Bootstrap autocomplete tokenfield with Ajax Example, hear for How to Dynamic Autocomplete Tag Input Plugin For jQuery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

PHP – Bootstrap autocomplete tokenfield with Ajax Example

This jquery ajax functionality can be done simple and very easily by using ajax call jQuery here external “tagmanager” plugin for get multiple form input tags based on get all the info user selection from simple mysql with PHP based dynamic list of data.

Include Extrenal Lins

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

Database Connection(config.PHP)

    <?php
        
        $mysqli = new mysqli("localhost", "root", "[email protected]#$", "live-autocomplete");
        $myquery_sql = "SELECT sub_name FROM subjects 
                WHERE sub_name LIKE '%".$_GET['query']."%'
                LIMIT 10"; 
        $data_results = $mysqli->query($myquery_sql);
        $data = [];
        while($row = $data_results->fetch_assoc()){
             $data[] = $row['sub_name'];
        }
        echo json_encode($data);
    ?>
	
create a simple mysql table
For this example, I have a database table with all subjects :
id
sub_name

markup Languages(index.php)

Using here jquery Tag Manager plugin we can simple manage all the tags input tags uinq or separately from all the data each input with simple better layout.

    <!DOCTYPE html>
    <html>
    <head>
        <title>PHP Autocomplete Input multiple tags with Dynamic Data Load using jquery Ajax</title>
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="tagmanager.min.css">
        <script type="text/javascript" src="3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="3.0.2/tagmanager.min.js"></script>
        <script src="4.0.1/bootstrap3-typeahead.min.js"></script>  
    </head>
    <body>
    <div class="container">
        
            <div class="form-group">
                <label>Add Subject Tags:</label>
                <input type="text" name="subjects" placeholder="choose subject...." class="typeahead tm-input form-control tm-input-info"/>
            </div>
    </div>
    <script type="text/javascript">
      $(document).ready(function() {
        var tags = $(".tm-input").tagsManager();
		//simple jquery to call a php to mysqli fetch data
        jQuery(".typeahead").typeahead({
          source: function (query, process) {
            return $.get('aj.php', { query: query }, function (data) {
              data = $.parseJSON(data);
              return process(data);
            });
          },
          afterSelect :function (item){
            tags.tagsManager("pushTag", item);
          }
        });
      });
    </script>
    </body>
    </html>

Example

I hope you have Got Bootstrap Autocomplete with Dynamic Data Load using PHP Ajax And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Related FAQ

Here are some more FAQ related to this Article: