How to Autocomplete Textbox Jquery PHP MYSQL

How to Autocomplete Textbox Jquery PHP MYSQL

How to Autocomplete Textbox Jquery PHP MYSQL

0 Sales

Free

The Autocomplete textbox allows the user to quickly identify and choose a value in the option list pre-populated. It automatically displays the suggestions as the user enters the field. You can easily add the auto-complete textbox to the website with jQuery UI Autocomplete plugin. The auto complete jQuery UI plugin transforms an autocomplete input field. This plugin starts looking for matched values when you type the user in the auto complete input field and lists them.

 

Autocomplete textbox provides a user-friendly way to add a searcher entry area to the web application with auto-suggestions. Once you start typing in the input field it is very helpful when you want to add suggestions in the database. In this tutorical, we show you how to use jQuery, PHP and MySQL to implement Autocomplete textboxing and display database suggestions.

 

The sample software will automatically incorporate feedback for search skills. The ability to auto-suggest is retrieved from the server and listed below the text box as the user begins to type.


 

Create Database Table

 

A table must be created in the database to store data for autosuggestion. The following SQL produces a skill table in the MySQL database with some basic fields.

 

CREATE TABLE `skills` (

 `id` int(11) NOT NULL AUTO_INCREMENT,

 `skill` varchar(100) COLLATE utf8_unicode_ci NOT NULL,

 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',

 PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


 

Autocomplete Search Input Field

In the input field a complete suggestion box with JQuery UI Plugin is connected to the code below.

jQuery UI Autocomplete Plugin:

Include the library files for jQuery and jQuery for Autocomplete use.

<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<!-- jQuery UI library -->

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>



 

Initialize Autocomplete:

 

Initialize the Autocomplete plugin by autocomplete().

 

  • Specify the input field element's selector ID/class (#Skill input) to add the Autocomplete feature.

  • To recover the auto-suggestions data, specify the local or remote source (search.php).

 

<script>

$(function() {

    $("#skill_input").autocomplete({

        source: "search.php",

    });

});

</script>


 

HTML Input Element:

 

Initially, the skills are entered by a text field input.

 

  • In the autocomplete() method the ID of the input field should be defined.

  • The proposals are collected from the database and listed under the input box when the textbox is typed.

  • For the submission of the further form process the selected value is set to the input text field.

 

<label>Skills:</label>

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


 

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


 

The autocomplete) (Autocomplete plugin is named for the search.php folder. This file recovers the search term skills data and returns them as a PHP-and MySQL-encoded JSON array.

 

A GET URL request is made by the autocomplete) (method and query string with the word field is inserted. Therefore, you can use PHP GET method to get the search term. Find the records in the MySQL database (skills table) and search them in $GET['term'] with the following PHP script. The filtered data returned as a JSON encrypted array to the autocomplete() process.

 

<?php

// Database configuration

$dbHost     = "localhost";

$dbUsername = "root";

$dbPassword = "root";

$dbName     = "codexworld";


// Create database connection

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);


// Check connection

if ($db->connect_error) {

    die("Connection failed: " . $db->connect_error);

}


// Get search term

$searchTerm = $_GET['term'];


// Fetch matched data from the database

$query = $db->query("SELECT * FROM skills WHERE skill LIKE '%".$searchTerm."%' AND status = 1 ORDER BY skill ASC");


// Generate array with skills data

$skillData = array();

if($query->num_rows > 0){

    while($row = $query->fetch_assoc()){

        $data['id'] = $row['id'];

        $data['value'] = $row['skill'];

        array_push($skillData, $data);

    }

}


// Return results as json encoded array

echo json_encode($skillData);

?>


 

Replace Input Value with ID


 

The selected item value is sent for auto-complete entry on the server side when submitted to the form. You should replace the input field value with element ID if you want the selected value ID.

 

$(function() {

    $("#skill_input").autocomplete({

        source: "search.php",

        select: function( event, ui ) {

            event.preventDefault();

            $("#skill_input").val(ui.item.id);

        }

    });

});



 

Autocomplete Widget Options

 

There are several configuration options available to customize the functionality of JQuery UI Autocomplete. Some useful Autocomplete plugin configuration options are provided below.

 

  1. Source – Required. The source from which the data are collected for the list of suggestions must be indicated. The local or remote source can be specified.

 

  • Local source: For local data, an array may be used. [ "Choice1", "Choice2" ] OR [ { label: "Choice1", value: "value1" }, { label: "Choice2", value: "value2" }, ... ]

$( ".selector" ).autocomplete({

    source: [ "PHP", "Python", "Ruby", "JavaScript", "MySQL", "Oracle" ]

});


 

  • Remote source: The URL may be used to return JSON data from a remote source. http://example.com

$( ".selector" ).autocomplete({

    source: "http://example.com"

});

 

  1. minLength – Default 1 is optional. The minimum number of characters that have to be entered before looking.

$( ".selector" ).autocomplete({

    minLength: 5

});


 

  1. select( event, ui ) – Triggered by picking a quality from the proposals.

$( ".selector" ).autocomplete({

    select: function( event, ui ) {}

});

Retrieve Autocomplete Input Value with PHP

Once the form has been submitted, you can use the $_POST method in PHP to obtain the value of the autocomplete input field. The following example code snippet shows how to submit the form and obtain the value of the autocomplete field using PHP.

 

1. HTML Form with Autocomplete Input:

<form method="post">

    <label>Your Skills:</label>

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

    <input type="submit" name="submit" value="SUBMIT"/>

</form>

 

2. Get Value of Autocomplete Input:

Use the $_POST method in PHP after submitting the form to retrieve the value from the field of autocomplete input.

if(isset($_POST['submit'])){

    $skill = $_POST['skill_input'];

    echo 'Skill Input: '.$skill;

}

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 : May 14, 2020

Updated Date : May 14, 2020

Ratings

Comments : 0

Downloads : 0