PDA

View Full Version : Live Search Combo Box - Results Not Displaying



scblue
29 Nov 2009, 10:56 PM
Hi all,

I am new to ExtJS and is attempting to build a live search function into my program.
From FireBug, I can see that the Json object (also new to Json) is returned correctly.
However, the results are not displayed to the user.
Can someone help?

Thanks in advance.

.js file:




Ext.onReady(function(){

var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://localhost/ext-3.0.3/livesearchdata.php',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: 'rows'
}, [
{name: 'name_txt', mapping: 'name_txt'},
{name: 'tax_id', mapping: 'tax_id'}
])
});

// Custom rendering Template
var resultTpl = new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<h3><span>{name_txt}<br /></h3>',
'{name_txt}',
'</div></tpl>'
);

var search = new Ext.form.ComboBox({
store: ds,
displayField:'name_txt',
typeAhead: false,
loadingText: 'Searching...',
width: 570,
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
applyTo: 'search',
itemSelector: 'div.search-item',
onSelect: function(record){ // override default onSelect to do redirect
window.location =
String.format('http://extjs.com');
}
});
});

Here is the HTML file (taken from example):




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ComboBox - Live Search</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="livesearch.js"></script>
<link rel="stylesheet" type="text/css" href="combos.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<style type="text/css">
p { width:650px; }
</style>
</head>
<body>
<script type="text/javascript" src="examples.js"></script><!-- EXAMPLES -->
<p>
<b>Combo with Templates and Ajax</b><br />
This is a more advanced example that shows how you can combine paging, Ext.Template and a remote data store
to create a "live search" feature.
</p>
<p>The js is not minified so it is readable. See <a href="forum-search.js">forum-search.js</a>.</p>

<!-- The box wrap markup embedded instead of using Element.boxWrap() -->
<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the Ext Forums</h3>
<input type="text" size="40" name="search" id="search" />
<div style="padding-top:4px;">
Live search requires a minimum of 4 characters.
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

</body>
</html>

And here is the PHP file:




<?php

include 'config.php';
include 'db_login.php';

$name = $_GET['query'];

$query1 = "SELECT tax_id, name_txt FROM db1 WHERE name_lab='lab name' AND name_other LIKE '%" .$name. "%'";

$result = mysql_query($query1) or die(mysql_error());
$count = mysql_num_rows($result);

while($row = mysql_fetch_assoc($result)){
$path['name_txt'] = $row["name_txt"];
$path['tax_id'] = $row["tax_id"];

$nodes[] = $path;
}

print '({"totalCount":'.$count.', "rows":';
print json_encode($nodes);
print '})';

?>



I'd really appreciate any help. :)

stnw
14 Jul 2010, 12:19 AM
Try this:

var ds = new Ext.data.Store({
url: 'http://localhost/ext-3.0.3/livesearchdata.php',
reader: new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: 'rows'
}, [
{name: 'name_txt', mapping: 'name_txt'},
{name: 'tax_id', mapping: 'tax_id'}
])
});