How to make Search Bar, Show suggestions by PHP and MySQL

In this example, We have made a search bar which is appeared when the “Search” icon gets clicked at App Bar. When a user inputs any query, it gets the suggestion from PHP and MySQL server and shows in the app. I have used REST API to communicate with the server.

Back end (Server side Part): Our MySQL table

This is our MySQL database table where the name, address, class, and roll_no are stored. Now in the PHP part, we will list all the data in an array, match every full_name with a query, and sort according to the matching percentage of full_name and query from the app. See the PHP code below:

test/search_suggestion.php (See the comments in code)

  $db = "test_db";
  $host = "localhost";
  $db_user = 'root';
  $db_password = 'root';
  //MySql server and database info
  $link = mysqli_connect($host, $db_user, $db_password, $db);
  //connecting to database

  function matchper($s1, $s2){ 
        similar_text(strtolower($s1), strtolower($s2), $per);
        return $per; //function to find matching similarity of two string

      $query = strtolower($_REQUEST["query"]);
      $query = "";
  } //if there is query in parameter then grabe it

  $json["error"] = false;
  $json["errmsg"] = "";
  $json["data"] = array();

  $sql = "SELECT * FROM student_list ORDER BY full_name ASC";
  $res = mysqli_query($link, $sql);
  $numrows = mysqli_num_rows($res);
  if($numrows > 0){
     //check if there is any data
     $namelist = array();

      while($obj = mysqli_fetch_object($res)){
           $matching = matchper($query, $obj->full_name);
           //get the similarity between name and query
           $namelist[$matching][$obj->student_id] = $obj->full_name;
           //set the matching and student id as key so that we can sort according to key

      //to sort array by key in desending order, use ksort() to reverse

      foreach($namelist as $innerarray){
         foreach($innerarray as $studentid => $fullname){
            $subdata = array(); //create new array
            $subdata["id"] = "$studentid"; //return as string
            $subdata["name"] = $fullname; 

            array_push($json["data"], $subdata); //push sub array into $json array
      $json["error"] = true;
      $json["errmsg"] = "No any data to show.";

  header('Content-Type: application/json');
  // tell browser that its a json data
  echo json_encode($json);


Now in the Flutter part, add http package as a dependency by adding following lines in pubspec.yaml file.

    sdk: flutter
  http: ^0.12.1

Add Internet Permission by adding this line in android/app/src/main/AndroidManifest.xml before <application>

<uses-permission android:name="android.permission.INTERNET"/>

Flutter Dart Code, see explanation in comments to understand the code.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:http/http.dart' as http;
//import http package manually

class SearchBar extends StatefulWidget{
  State createState() {
     return _SearchBar();

class _SearchBar extends State{
  bool searching, error;
  var data;
  String query;
  String dataurl = "";
  // do not use http://localhost/ , Android emulator do not recognize localhost
  // insted use your local ip address or your live URL
  // hit "ipconfig" on Windows or "ip a" on Linux to get IP Address

  void initState() {
        searching = false;
        error = false;
        query = "";

  void getSuggestion() async{  //get suggestion function
        var res = await + "?query=" + Uri.encodeComponent(query));
        //in query there might be unwant character so, we encode the query to url
        if (res.statusCode == 200) {
            setState(() {
                data = json.decode(res.body);
                //update data value and UI
           //there is error
           setState(() {
               error = true;

  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar( 
            leading: searching?IconButton( 
                                  setState(() {
                                     searching = false;
                                     //set not searching on back button press
            //if searching is true then show arrow back else play arrow
            title:searching?searchField():Text("My Frieds"),
            actions: [
                   icon: Icon(,
                        setState(() {
                             searching = true;
                 ), // search icon button

                 //add more icons here
            backgroundColor: searching?,
            //if searching set background to orange, else set to deep orange

                child:data == null?
                         padding: EdgeInsets.all(20),
                         child: searching?Text("Please wait")
                                :Text("Search any peoples")
                        //if is searching then show "Please wait"
                        //else show search peopels text
                        child: searching?showSearchSuggestions()
                               :Text("Find any Peoples"),
                  // if data is null or not retrived then 
                  // show message, else show suggestion

  Widget showSearchSuggestions(){
     List suggestionlist = List.from(
            return SearchSuggestion.fromJSON(i);
              //serilizing json data inside model list.
     return Column({
           return InkResponse( 
             onTap: (){
                //when tapped on suggestion
                print(; //pint student id
             child: SizedBox( 
               width:double.infinity, //make 100% width
                        child: Container( 
                            padding: EdgeInsets.all(15),
                            child: Text(, style: TextStyle(
                                fontSize:20, fontWeight:FontWeight.bold,

  Widget searchField(){ //search input field
      return Container( 
           autofocus: true,
            style: TextStyle(color:Colors.white, fontSize: 18),
                 hintStyle: TextStyle(color:Colors.white, fontSize: 18),
                 hintText: "Search Peoples",
                 enabledBorder: UnderlineInputBorder(
                     borderSide: BorderSide(color:Colors.white, width:2),
                 ),//under line border, set OutlineInputBorder() for all side border
                 focusedBorder: UnderlineInputBorder(
                     borderSide: BorderSide(color:Colors.white, width:2),
                 ), // focused border color
            ), //decoration for search input field
            onChanged: (value){
                  query = value; //update the value of query 
                  getSuggestion(); //start to get suggestion

//serarch suggestion data model to serialize JSON data 
class SearchSuggestion{
   String id, name;
   factory SearchSuggestion.fromJSON(Map<String, dynamic> json){
      return SearchSuggestion( 
        id: json["id"],
        name: json["name"],

In this way, you can make Search Bar with a suggestion feature using PHP and MySQL server.

1 Commet on this Article


Good day! The new version of Flutter fails to run the code.

2 years ago

Please Wait...