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:

    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');
            }
        });
    });
    Here is the HTML file (taken from example):

    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>
    And here is the PHP file:

    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 
    '})';
        
    ?>
    I'd really appreciate any help.

  2. #2

    Default

    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'}
    ])
    });

Posting Permissions

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