Live Search Combo Box - Results Not Displaying
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:
Here is the HTML file (taken from example):Code: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'); } }); });
And here is the PHP file:HTML Code:<!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>
I'd really appreciate any help.PHP Code:
<?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 '})';
?>
