Results 1 to 2 of 2

Thread: Live Search Combo Box - Results Not Displaying

  1. #1

    Question 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:

        var ds = new{
            proxy: new{
                url: 'http://localhost/ext-3.0.3/livesearchdata.php',
                method: 'GET'
            reader: new{            
                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>',
        var search = new Ext.form.ComboBox({
            store: ds,
            typeAhead: false,
            loadingText: 'Searching...',
            width: 570,
            tpl: resultTpl,
            applyTo: 'search',
            itemSelector: '',
            onSelect: function(record){ // override default onSelect to do redirect
                window.location =
    Here is the HTML file (taken from example):

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
        <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; }
    <script type="text/javascript" src="examples.js"></script><!-- EXAMPLES -->
        <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>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 class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
    And here is the PHP file:

    PHP Code:


    include 'config.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);
    $row mysql_fetch_assoc($result)){
    $path['name_txt'] = $row["name_txt"];
    $path['tax_id'] = $row["tax_id"];
    $nodes[] = $path;        
    '({"totalCount":'.$count.', "rows":';
    I'd really appreciate any help.

  2. #2


    Try this:

    var ds = new{
    url: 'http://localhost/ext-3.0.3/livesearchdata.php',
    reader: new{
    totalProperty: 'totalCount',
    root: 'rows'
    }, [
    {name: 'name_txt', mapping: 'name_txt'},
    {name: 'tax_id', mapping: 'tax_id'}

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts