Yii Ajax Search in Database – Search As You Type

http://www.yiiframework.com/extension/database-live-search/

Yii is fantastic framework for php as it provides lots of user friendly functions through ajax. However, I was searching for a method so that I could search in database as we type- something what google is doing these days.

With some hard work, I am able to write the script that will search into your Yii Database as you type. I had written this script earlier in PHP, but was a bit challenging with Yii as there were different database calling procedures and functions. However, this is how we go:

This is a free search extension to search in database. This extension produces the results as we type and the search narrows down as we type more and more.This extension is incredibly helpful for quick search “Something like google does”.

##Requirements
Yii 1.1 or above
NOTE:- try to keep less number of columns for fast and accurate results

##Usage
Firstly create a folder called js in root (where the file index.php is there) and paste the file the file jquery.js

Then we need to edit Model Class and add the following function. This will be the engine that will provide free search in database and will return the results. This function is currently returning model (Tested) , but you can also return the CActiveDataProvider.


public function freeSearch($keyword)
{

/*Creating a new criteria for search*/
$criteria = new CDbCriteria;

$criteria->compare(‘name’, $keyword, true, ‘OR’);
$criteria->compare(‘barcode’, $keyword, true, ‘OR’);
$criteria->compare(‘part_number’, $keyword, true, ‘OR’);

/*result limit*/
$criteria->limit = 100;
/*When we want to return model*/
return Items::model()->findAll($criteria);

/*To return active dataprovider uncomment the following code*/
/*
return new CActiveDataProvider($this, array(
‘criteria’=>$criteria,
));
*/

}
Then we will be creating two actions (functions) in the controller class to perform this search. The first function (actionFreeSearch()) will be the main static page where we will provide the keyword. This page will send request to next function with the keyword parameter (actionSearchEngine($keyword)). This keyword is then send to model which will perform the search on that keyword and will return the results.


public function actionFreeSearch()
{
$model=new Items('search');
$this->render('freeSearch',array('model'=>$model));
}

public function actionSearchEngine($keyword)
{
// echo “THIS IS IAJAXX “.$keyword;

$model=new Items();
$model->unsetAttributes(); // clear any default values
$results=$model->freeSearch($keyword);
$this->renderPartial(‘_ajax_search’,array(
‘results’=>$results,
));
}

Also you need to modify the access rules


array('allow', // allow authenticated user to perform 'create' and 'update' actions
'actions'=>array('create','update','InboundSearch','OutboundSearch','admin','FreeSearch','SearchEngine'),
'users'=>array('@'),
),

Now you need to create two views. First one for the actionFreeSearch() function which will be freeSearch.php

~~~
[php]

baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/jquery.js');
?>

$(document).ready(function() {

$(“#faq_search_input”).keyup(function()

{
var faq_search_input = $(this).val();
var dataString = ‘keyword=’+ faq_search_input;

var ref_id = $(‘#ref_id’).val();
var cust_id = $(‘#cust_id’).val();
var current_url = $(‘#current_url’).val();

/*This is the minimum size of search string. Search will be only done when at-least 3 characters are provided in input*/
if(faq_search_input.length>3)

{
$.ajax({
type: “GET”,
url: current_url+”/SearchEngine”,
data: dataString,
/*Uncomment this if you want to send the additional data*/
//data: dataString+”&refid=”+ref_id+”&custid=”+cust_id,
beforeSend: function() {

$(‘input#faq_search_input’).addClass(‘loading’);

},
success: function(server_response)
{

$(‘#searchresultdata’).html(server_response).show();
$(‘span#faq_category_title’).html(faq_search_input);

if ($(‘input#faq_search_input’).hasClass(“loading”)) {
$(“input#faq_search_input”).removeClass(“loading”);
}

}
});
}return false;
});
});

controller->id;
$current_url=$baseUrl.”/”.$model_name;

/*To Send the additional data if needed*/
$reference_id = 88;
$customer_id = 77;
//echo “Search :”.$current_url;
?>

<input type=”hidden” id=”current_url” value=””/>

<input type=”hidden” id=”ref_id” value=””/>
<input type=”hidden” id=”cust_id” value=””/>
Enter Item Name Part Number or barcode

~~~

Lastly you need to create a file _ajax_search.php for presenting the database results. This file is getting called every time we are typing each character.

foreach ($results as $row)
{
echo “Title: “.$row[‘name’].”
“;
}

##Resources

Advertisements

11 comments

  1. Thank you for sharing =).
    I’m a newbie with Yii and i want to use this extension for my web site developped with Yii.
    But i don’t understand how to use it ?
    Can you explain more ?

    Many thanks

  2. I tried your extension but it gives an error (File does not exist: /var/www/html/test/undefined, referer: http://192.168..10.71/epfr/index.php?r=tblDeposit/freeSearch)
    I followed all your steps and edit it to suit. I am newbie to yii and difficult to trace it.

    Thanks for this graet extansion.
    Rohana.

  3. i’ve tried this extension but its not working. I’ve changed all the table and column names but still its not working. Please help me i’m getting frustrated

  4. Hello!

    First of all, thank you for what you do, it help to a lot of developers!

    Second, I am trying to get it working, i followed all the steps, and i can’t get it working, it is not giving me an error so i don’t know why isn’t working, i have the input form i write something i press enter and i can see what i wrote is going trough GET but in the div is not appearing anything, you can see this here http://www.whattodomalta.com/events/freeSearch

    My email is edu@eamador.net
    I will really appreciate any help!!!!

    Thanks a lot.
    Eduardo Amador

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s