loading

How to Autocomplete Textbox with Multiple Selection using jQuery in PHP

How to Autocomplete Textbox with Multiple Selection using jQuery in PHP

How to Autocomplete Textbox with Multiple Selection using jQuery in PHP

0 Sales

Free

The Autocomplete Textbox shows suggestions beneath the input field, allowing the user to choose a value from a pre-populated values list. It assists the user in locating and selecting a desired value from the list of auto-populated choices. When the user types in the textbox, the corresponding data is retrieved from the database and shown in the dropdown beneath the textbox. You can simply make the text input field more user-friendly by utilising the jQuery UI Autocomplete plugin in PHP to provide an autocomplete functionality textbox.

In general, the autocomplete input field allows you to pick one item from the list of auto recommendations. However, if you wish to choose several values, the multiselect option in the autocomplete textbox must be enabled. In this article, we'll teach you how to utilise jQuery with PHP and MySQL to create an autocomplete textbox and allow the user to choose multiple things from a dynamic preset list.

Create Database Table

To store the autosuggestions data, a table in the database must be built. The SQL that follows creates a talents table in the MySQL database.

CREATE TABLE `skills` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Autocomplete Textbox with Multiple Selection

HTML Input Field:
Define the input element to which the autocomplete feature will be applied.

<input type="text" id="skill_input"/>

jQuery Tokeninput Plugin:
To add autocomplete functionality to the input field, we will utilise the jQuery Tokeninput plugin. Include the jQuery and Tokeninput library files first.

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- Tokeninput plugin library -->
<script src="js/jquery.tokeninput.js"></script>
<link rel="stylesheet" href="css/token-input.css" />


Using the tokenInput() function, initialise and connect the Tokeninput to the input field. Also, indicate the server-side script URL that will be used to get data from the database.

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php");
});
</script>

Fetch Autocomplete Data with PHP and MySQL (search.php)

To produce the auto-suggestions data based on the search request, a server-side script was required. This file creates search results and feeds them to the tokenInput() function for the autocomplete list.

 - Establish a connection to the MySQL database.
 - Using the GET parameter q, retrieve the search keyword.
 - Using PHP and MySQL, get matching data from the database depending on the search query.
 - Create an array of data from search results.
 - Create a JSON representation of the search results.

<?php

// Database configuration
$dbHost     'localhost';
$dbUsername 'root';
$dbPassword 'root';
$dbName     'codexworld';

// Connect with the database
$db = new mysqli($dbHost$dbUsername$dbPassword$dbName);

// Check connection
if($db->connect_error){
    die("Connection failed: " $db->connect_error);
} 

// Get search term
$searchTerm $_GET['q'];

// Get matched data from skills table
$query $db->query("SELECT id, name FROM skills WHERE name LIKE '%".$searchTerm."%' AND status = '1' ORDER BY name ASC");

// Generate skills data array
$skillData = array();
if($query->num_rows 0){
    while($row $query->fetch_assoc()){
        $skillData[] = $row;
    }
}

// Return results as json encoded array
echo json_encode($skillData);

?>

To modify the autocomplete multiselect textbox, the jQuery Tokeninput plugin offers a number of setting options. The following are some of the most helpful configuration settings for multiple select autocomplete.

Autocomplete Multiselect with Custom Labels

Custom labels can be used for the hint, no result, and searching text.

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        hintText: "Type your skills...",
        noResultsText: "Skill not found.",
        searchingText: "Searching..."
    });
});
</script>

Autocomplete Multiselect with Custom Delete Icon

To supply a custom image for the delete link, use the deleteText option. To conceal the delete link, enter an empty text in deleteText.

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        deleteText: "&#x2603;"
    });
});
</script>

Search and Token Limit in Autocomplete Multiselect

Set the search and token limits using minChars and tokenLimit.

 - minChars – Set the minimum amount of characters that a user must enter before a search will be done.
 - tokenLimit – Set the maximum number of results that the user can pick.

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        minChars: 3,
        tokenLimit: 2
    });
});
</script>

Modify Response in Autocomplete Multiselect

You may use the onResult callback method to change the server response before it is displayed to the user.

<script>
$(document).ready(function() {
    $("#skill_input").tokenInput("search.php", {
        onResult: function(results){
            $.each(results, function (index, value) {
                value.name = "CODEX: " + value.name;
            });

            return results;
        }
    });
});
</script>

Get Selected Value from Autocomplete Multiselect

Now we'll teach you how to use PHP to retrieve the picked different value from the Autocomplete Multiselect textbox.

Construct an HTML form and insert the autocomplete input box into it first.

 - In the method attribute, provide the HTTP method.
 - In the action property, specify the server-side file location.
 - Insert a submit button inside the form.

<form method="post" action="submit.php">
    <input type="text" name="skill_input" id="skill_input"/>
    <input type="submit" name="submit" value="SUBMIT">
</form>

To obtain the specified values, utilise the PHP $_POST method in the server-side script (submit.php).

The entries of the autocomplete multi-select textbox are posted in this script when the form is submitted.
The IDs of the chosen objects will be returned as a comma (,) separated string.
In PHP, use the explode() function to transform the ids string to an array.

<?php

if(isset($_POST['submit'])){
    // Get selected skills
    $selected_skills_ids $_POST['skill_input'];
    
    // Convert skills ids string to array
    $selected_skills_arr explode(','$selected_skills_ids);
}

?>

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Feb 17, 2022

Updated Date : Feb 17, 2022

Ratings

Comments : 0

Downloads : 0