Simple livesearch with grid and JSON + PHP

[yozefff]

Well, finally got my livesearch with a datagrid+JSON+PHP working. I've even wrote a tutorial for it:

http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-1

And the working example:

http://www.leihitu.nl/ext-2.0.1/examples/tutorial_final/

greets

[RWaters]

Thanks for the contribution. Looks good. One suggestion would be to toss the code through something that would convert the tabs to spaces so that theres not an 8 space indent. I think most people find 2 or 4 easiest to read.

[yozefff]

ok .. thnx ... will do next time ;-)

[franckxx]

Hi yazeff !

I just want to say you ----> BIG THX

i like your apps, i think use it....

I've just one question :
how can i show all entries (when page load), and filter with search entry ?

bye and thx yto share ;-)

[yozefff]

thnx ....

hmm yah it's possible. You'll need to modify the php script and the js file.

replace the createDS function with this:



// ----------------
// Create datasource
// ----------------
function createDS()
{
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'search.php',
method: 'POST'
}),

reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id',
fields: ['id','name','email','comments']
})

});

ds.load(
{
params:
{
query:"dummy",
show:"all"
}
});
}


and the search.php :



<?php
//dl("json.so");
include("../connection.php");
include("../JSON.php");


function search($query="",$showAll=false)
{
$payload=array();
$payload["total"]=0;
$payload["results"]=array();

$sql="";
if(trim($query)!="")
{
$sql="SELECT * FROM people WHERE (name LIKE '%" . mysql_real_escape_string(trim($query)) . "%')";

if($showAll) $sql="SELECT * FROM people";

if($rs=mysql_query($sql))
{
$payload["total"]=mysql_num_rows($rs);
while($data=mysql_fetch_assoc($rs))
{
$payload["results"][]=$data;
}
}
}

$json = new Services_JSON();
return $json->encode($payload);
}



$searchResults=search();
if(connectDB("YOUR DATABASE NAME HERE"))
{
$showAll=false;
if(isSet($_POST["show"]) && $_POST["show"]=="all"))
{
$showAll=true;
}

if(isSet($_POST["query"]))
{
$searchResults=search($_POST["query"],$showAll);
}
}

print $searchResults;
?>


should work ;-)

[garraS]

Thanks, nice tool ^^

[franckxx]

thnx ....

hmm yah it's possible. You'll need to modify the php script and the js file.

replace the createDS function with this:



// ----------------
// Create datasource
// ----------------
function createDS()
{
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'search.php',
method: 'POST'
}),

reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
id: 'id',
fields: ['id','name','email','comments']
})

});

ds.load(
{
params:
{
query:"dummy",
show:"all"
}
});
}


and the search.php :



<?php
//dl("json.so");
include("../connection.php");
include("../JSON.php");


function search($query="",$showAll=false)
{
$payload=array();
$payload["total"]=0;
$payload["results"]=array();

$sql="";
if(trim($query)!="")
{
$sql="SELECT * FROM people WHERE (name LIKE '%" . mysql_real_escape_string(trim($query)) . "%')";

if($showAll) $sql="SELECT * FROM people";

if($rs=mysql_query($sql))
{
$payload["total"]=mysql_num_rows($rs);
while($data=mysql_fetch_assoc($rs))
{
$payload["results"][]=$data;
}
}
}

$json = new Services_JSON();
return $json->encode($payload);
}



$searchResults=search();
if(connectDB("YOUR DATABASE NAME HERE"))
{
$showAll=false;
if(isSet($_POST["show"]) && $_POST["show"]=="all"))
{
$showAll=true;
}

if(isSet($_POST["query"]))
{
$searchResults=search($_POST["query"],$showAll);
}
}

print $searchResults;
?>


should work ;-)

Hi Yozefff,

THX a lot for your help ;-)
I've try the modification code, but it don't work for me... I think the problem is in the "search.php".
when i load page, i don't see all result... (but no firebug error)

[yozefff]

hmm ok .. i didn't test it ;-)

i'll test it now hahaha.

Ok found it

this line



if(isSet($_POST["show"]) && $_POST["show"]=="all"))


should be



if(isSet($_POST["show"]) && $_POST["show"]=="all")


live example:
http://www.leihitu.nl/ext-2.0.1/examples/tutorial_final_v2/

[franckxx]

You simply the Best !! like Tina turner ! :)):)):))

thx for this great modif

[freese]

Would it be possible to make an editable Grid out of this cool tool? That would make it really an extremely good solution for data managing. Sorry if it is a stupid question, but I just started with ext. Thank you!

[border9]

I think ive found a small bug or something, it works with FF2 but not with IE, when you load your script in a new region, im running it with a border layout, North and Center Regions inside of a West Region, what happens is the Form wont load in IE, but it loads in FF.

IE:

Viewpoint:

{
region:'west',
id:'searchpanel',
title:'Zipcode Search',
collapsedTitle: {
//Just like an Ext.DomHelper config object
element : {
// Required0
tag : 'img',
// Required
src : 'westzipcode.png'
// Set this if you need to.
//style : "margin-left:3px; color: #FF0000; font-weight: bold;"
}
},
collapsible:true,
collapsed:true,
layout:'border',
width:210,
items:[ simplesearch, gridsearch ]
}

Form:

var simplesearch = new Ext.FormPanel({
region:"north",
id:'zipsearch',
height:40,
labelWidth: 50,
frame:true,
border:false,
bodyStyle:'padding:5px 5px 0',
defaults: {width: 210},
defaultType: 'textfield',
items: [{

fieldLabel: 'Search',
name: 'query',
width: 125,
allowBlank:true,
listeners:
{
keyup: function(el,type)
{
var theQuery=el.getValue();

dssearch.load(
{
params:
{
query: theQuery
}
});
}
}
}
]
});

Grid:


var gridsearch = new Ext.grid.GridPanel(
{
store: dssearch, // use the datasource

cm: new Ext.grid.ColumnModel(
[
//expander,
{id:'zipcode',header: "Zip Code", width: 75, sortable: true, dataIndex: 'zip'},
{id:'citystate',header: "City / State", sortable: true, width: 135,
renderer: function(value, metadata, record) {
return String.format("{0}, {1}", record.data.city, record.data.state);
}}
]
),

viewConfig:
{
forceFit:true
},

//plugins: expander,
region:"center",
title:"Results",
//layout:'fit',
border:false,
width:210,
stripeRows:true
});
dssearch.load();

This works with Firefox2 but when you try to run it in IE, what happens is the Form doesnt load, and Ive been trying to debug it for 3 days now and for the life of me i cant find an error or what i might have done. Niether IE or Firefox throw any errors or anything, the form in the Center Region just doesnt show up. Any ideas? Thanks

[aphelion]

hello, i tried your tutorial with 2.1 version and everything looks great. the serach box appears, all the files seem in place but no result by tiping any of the chosen names. i tried to echo the result directly from the php page and everything is ok there so it's not really a mysql issue either. did some one encountered some issue with 2.1 as well?

anyway the final result is very nice and thank you to share it with the rest of us

[phunnel]

I have been playing around with the example and noticed that with IE 6 when a search is performed the column headers disappear. If a search is performed and the results grid is collapsed and reopened then the column headers reappear. This does not occur with firefox. has anyone else come across this?

[stefx]

Hi to all... I've a problem to work with thi s example...

I've downloaded the example but when enter soma characters into search field, nothing happens.

This my configuration:

- I've downloaded the ext js package and in the examples directory I've put the file into a temp folder. (http://localhost/ext-2.2/examples/temp/index.html)
- This my connection file (are correct!):

$db_user="root"; // your mysql username
$db_password="_password_"; // your mysql password
$db_host="localhost"; // your mysql hostname- This my search.php file:

include("../connection.php"); //(http://localhost/ext-2.2/examples/connection.php)
include("../JSON.php");//(http://localhost/ext-2.2/examples/JSON.php)
...
if(connectDB("db_name"))- The db was successfully created and populated.

Where is the problem??!?!?

Thanks a lot!

[anshubansal2000]

Hi,
I am refering your example to display search results that I get from yahoo boss API. The difference between your application and mine is that you just receive 1 result and I get 10 line items at a time. I was wondering how to display those repeatative line items in the grid. Here is my code that resembes your one. Any help/suggestions would be hghly appreciated.




wnode.window.grid = new Ext.grid.GridPanel({
store : wnode.store,
columns : [
//{
// // header : 'Title',
// dataIndex : 'Title'
// }, {
// header : 'Url',
// dataIndex : 'Url'
// },
//{
// header : 'Summary',
// dataIndex : 'Summary'
//}
{
header : 'Url',
dataIndex : 'Url'
}
],
loadMask : true,
viewConfig : {
forceFit : true
},

// add the expander
plugins : expander,
collapsible : true,
animCollapse : false,

selModel : new Ext.grid.RowSelectionModel({
singleSelection : true
}),

bbar : wnode.window.pagging
}
)



var expander = new Ext.grid.RowExpander({
tpl : new Ext.Template(
'<p>{Summary}</p>'
)
});




Thanking you very much
Anshu

[groyk]

Hi and thank you for the LiveSearch function. Works great

I am trying to use RowActions on the LiveSearch table with no luck.

If I don't enter "dataIndex:" in "xg.ColumnModel(" It will simply not work!! Why?

I have attached the link to RowActions for your reference

RowActions (http://rowactions.extjs.eu/)

[wattee]

Hey, this looks really interesting and i would like to see it work,
has anybody got a working example? Since the files and sample links are dead i have no idea
what the files besides js look like.

[hendro]

Can You give me, new link to download your final tutorial, because your link http://www.leihitu.nl/ext-2.0.1/examples/tutorial_final/ is not work. or if you don't mind you can email my on : hpsukses@yahoo.com

please i need your help.

thanks
hendro

[sagar.uplenchwar]

Hi,
I am not able to download your demo project from link http://www.leihitu.nl/ext-2.0.1/examples/tutorial_final/tutorial_files.zip

[galaksi17]

sory, but the link error

[sakhd]

Possible to make this cool tool for editing the grid it? This will make it a really good solutions to manage data. Sorry if this is a stupid question, but I just started using ext. Thank you!

[alexhand]

what is livesearch ?

free shipping nike air max (http://www.handhqbrand.com) , cheap nike air max shoes sale online with low price