Autocomplete search in PHP

Autocomplete using PHP and Ajax

We’ve used only one form field for the demo. In practical examples, there might be many more fields. Here, we have defined one text field for astronauts and this will suggest their names once we start tying.

Use JQuery for Ajax to get a list of matching names

script type="text/javascript"> $(document).ready(function()  $("#astronauts").keyup(delay(function(e)  $.ajax( method: "POST", url: "response.php", dataType: "json", data:  astronaut_name: $(this).val() > >).done(function(response)  $("#astronauts-list").show(); var lists = ''; $.each(response, function(key, val)  lists += "\"" + val + "\")'>" + val + " "; >); $("#astronauts-list").html(lists); >); >, 700)); >); function highlightSelectedAstronauts(val)  $("#astronauts").val(val); $("#astronauts-list").hide(); > function delay(callback, ms)  var timer = 0; return function()  var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function()  callback.apply(context, args); >, ms || 0); >; > /script> 

Here is the complete javascript code. Let’s understand it block by block.

So, when document loads, we initialize keyup event for our field “astronauts”. It means whenever user types then this keyup event gets triggered and it performs ajax operation.

In the ajax call, once we received response from PHP then we show all the matching astronauts in the form of list in “li” and on clicking any name that astronaut will be selected in the text field.

Here, we have also delayed the request (using delay function) to the server by few milliseconds because sometime user types the name very fast and ajax requests the server multiple time which takes time to fetch the actual result.

If the matching list is huge then it will eventually takes longer time than the short list. So, the solution is to delay the request to the server by few milliseconds which not only lowers the burden on the server but also respond very quickly..

Get the list of matching names using cURL

 $astronaut_name = strtolower($_POST['astronaut_name']); $cURLConnection = curl_init('http://api.open-notify.org/astros.json'); curl_setopt($cURLConnection, CURLOPT_RETURNTRANSFER, true); $apiResponse = curl_exec($cURLConnection); curl_close($cURLConnection); $list = []; $list_astros = json_decode($apiResponse, true); if ($list_astros['message'] == 'success')  foreach ($list_astros['people'] as $key => $astronaut)  preg_match("/" . $astronaut_name . "/", strtolower($astronaut['name']), $output_array); if (!empty($output_array))  array_push($list, $astronaut['name']); > > > echo json_encode($list); 

In the above code we used cURL to get the list of astronauts. We can also fetch the list from database. But for the demo I think we can keep cURL for shorter code.

In the cURL request, we fetch the current astronauts which are currently present in the ISS (International Space Station). Once we get that list then we can start with collecting only that list which is currently matching with what user has requested.

In the next piece of code, we loop through each astronauts fetched using cURL and whatever the user has requested will be matched with each astronauts one by one and if it matches then that will be collected in the separate array and then using json_encode() function we’ll return json string to ajax call.

Conclusion:

Giving user best experience when it comes to larger website is the good approach but that doesn’t mean the website should be fancy. User must not be irritated when he/she requires particular list and he/she has to keep waiting.

Autocomplete using PHP and ajax saves not only users time and but it also increases usability as well.

Источник

Autocomplete Search box in PHP and MySQL

Autocomplete Search in PHP is the most useful & user-friendly features for searching something through Input Box. It suggests options related to user input text. It will quickly begin to display the related options while the user begins entering something into the text field. So, You can easily select the required options from the suggested dropdown options.

Why Need it – Suppose that the user has to enter some required data but he/she does not remember the exact name of the data, only able to enter some characters into the text field. but those characters may not be required or valid. In that situation, you have to use an autocomplete concept. So that the user can easily select exact valid data from the options list provided by the autocomplete search script. For Example – Google search also provides the options list while the user begins typing something in the google search box.

In this tutorial, I have shared the simple PHP script with MySQLi procedural MySQLi Object-oriented & PDO query. This script is very easy to understand & learn quickly. If you read the complete points of this tutorial, you will definitely implement it directly in your project.

Autocomplete Search in PHP Using jQuery MySQL

Before starting coding, Create the project folder like the following structure. Otherwise, use the given script directly in your existing project folder.

autocomplete/ |__autocomplete-search-form.php |__style.css |__database.php |__backend-script.php |__frontend-script.php

1. Create MySQL Database and Table

Create a database ( codingstatus ) using the following query –

Create a table ( tutorials ) in MySQL database using the following query.

CREATE TABLE `tutorials` ( `id` int(10) UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT, `tutorial_name` varchar(255) DEFAULT NULL, `created_at` timestamp(6) DEFAULT NULL, )

2. Connect PHP to MySQL Database

Use the following script to connect the autocomplete search to the MySQL database. Also, Replace the existing connection details with your own.

connect_error) < die("Connection failed: " . $conn->connect_error); > ?>

3. Create Search Input Box Using HTML

To create a search input box, You should configure the following points –

• Include an external CSS file style.css . Don’t worry, the code of this file is given in step – 4
• Also, Include jQuery CDN jQuery Library CDN & jQuery UI library
• Include External js file frontend-script.js . Don’t worry, It will explain in step – 5
• Write the HTML code to create an autocomplete search form.

File Name – autocomplete-search-form.php

      
AutoComplete Search In PHP MYSQL & jQuery
 
 
       

4. Create Autocomplete Search Script Using jQuery UI

Remember that the following script will not work until you include the jQuery UI library. This library was included in step -3. Now configure the following points –

• Declared autocomplete method with search input id #tutorial_name
• Assign backend-script.php file to the object property source

When the user begins typing something in the search input #tutorial_name , This script will access the backend data from backend-script.php . Don’t worry, backend script will be explained in the next step

File Name – frontend-script.js

5. Fetch Autocomplete search Text Using PHP & MySQL

To fetch autocomplete search text, You have to configure the following points –

• Include database connection file database.php
• Get the search input value using $_GET[‘term’] and assign it to a variable $searchTerm . Here the term is a parameter that will be generated by the jquery UI script.
• Write the MySQLi query with the LIKE operator.
• Run the MySQLi query
• If Search data is greater than zero in the database. fetch id & tutorial name and store it in an array variable $tutorialData .
• Convert value of $tutorialData into JSON format using json_encode() and print it.

File Name – backend-script.php

query($sql); if ($result->num_rows > 0) < $tutorialData = array(); while($row = $result->fetch_assoc()) < $data['id'] = $row['id']; $data['value'] = $row['tutorial_name']; array_push($tutorialData, $data); >> echo json_encode($tutorialData); ?>

My Suggestion

I have shared the above script in a smart way according to my working experience. Now you can easily implement an autocomplete search using PHP in your project.

If you have any doubts or suggestions related to this tutorial, you can ask me through the below comment box. I will reply as soon as possible.

Thanks For giving time to this tutorial…

Related posts:

Источник