1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    13
    Vote Rating
    0
    wesDuff is on a distinguished road

      0  

    Thumbs up Auto Complete Combobox w/ Template using MySQL and PHP

    Auto Complete Combobox w/ Template using MySQL and PHP


    Hello, I have been using EXT for about 2 days and been working on this example for a couple hours and go this working quite nicely. I have seen alot of posts on how to get this sort of thing working so I am going to give you a line by line example.

    Here we go

    Make sure you have WAMP or MAMP running on your local machine.
    Make sure it is running after you install it.
    Make sure you set up your project in the correct file on the server
    We are going to be using PHP5 and MySQL(latest version).

    First we are going to build the database.
    Open the phpMyAdmin:
    create a database called DB_under. (you can call this what ever you want just make sure you change it globaly).
    Ok close phpMyAdmin your done with it.

    Now we are going to make a new file called DB_build.php.
    This is a php script that is going to build our table for us and our fields.

    Here is the script

    PHP Code:
    <?php
       $mysqli 
    = new mysqli('localhost','root''root''DB_under');
       if(
    mysqli_connect_errno()) {
               
    printf("Connect failed: %s\n"mysqli_connect_error());
            exit();
       } else {
               
    printf("<div style='margin:10px; color:green; font-weight:bold'><span style='font-weight:normal; margin-right:7px; color:black'>1.</span>Connection Excepted </div>");
       }
        
    /*** sql to create a new table ***/
        
    $sql "CREATE TABLE drug (
        id int NOT NULL AUTO_INCREMENT,
        name varchar(30) NOT NULL,
        price INT NOT NULL,
        number INT NOT NULL,
        excerpt TINYTEXT NOT NULL,
        PRIMARY KEY  (id)
        )"
    ;


        if(
    $mysqli->query($sql) === TRUE)
            {
            echo 
    "<div style='margin:10px; color:green;'><span style='font-weight:normal; margin-right:7px; color:black'>2.</span>New table \"drug\" created successfully</div>";
            }
        else
            {
            echo 
    "<div style='margin:10px; color:red;'><span style='font-weight:normal; margin-right:7px; color:black'>2.</span>" $sql .  "<br />" $mysqli->error;
            }

     
    /*** close connection ***/
     
    $mysqli->close();
    ?>
    Ok now you need to go to your localhost and put in DB_build.php
    This will build your table and fields.
    Yea you can do this in phpMyAdmin but if you want to add a lot of tables and fields and other stuff this is a good way to build your database.

    No we are going to create another php file called index.php

    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>Combo Boxes</title>
        <link rel="stylesheet" type="text/css" href="css/ext-all.css" media="screen"/>
        <script type="text/javascript" language="JavaScript" src="js/jquery/jquery.js"></script>
        <script type="text/javascript" language="JavaScript" src="js/jquery/ext-jquery-adapter.js"></script>
        <script type="text/javascript" language="JavaScript" src="js/jquery/ext-all-debug.js"></script>
        <script type="text/javascript" language="JavaScript">
         Ext.onReady(function(){
             
          var ds = new Ext.data.Store({
          proxy: new Ext.data.HttpProxy({
                url: 'jsonObj.php'
          }),
          reader: new Ext.data.JsonReader({
                root: 'Root',
            }, [
                {name: 'Drug', mapping: 'name'},
                {name: 'Price', mapping: 'price'},
                {name: 'Number', mapping: 'number'},
                {name: 'Excerpt', mapping: 'excerpt'}
            ])
        });
    
        // Custom rendering Template
        var resultTpl = new Ext.XTemplate(
            '<tpl for="."><div class="search-item">',
                '<h3><span>{Drug}<br />Price: {Price}</span>Id#:Number:{Number} </h3>',
                '{Excerpt}',
            '</div></tpl>'
        );
        
        var search = new Ext.form.ComboBox({
            store: ds,
            displayField:'Drug',
            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
                alert("do something here");
            }
        });
    });
    </script>
    </head>
    <body>
        <div>
            <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                <h3 style="margin-bottom:5px;">Search for Specific Drug</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>
    </body>
    </html>
    Our JSON Request is calling a page called jsonObj.php. You can name this what ever you want just change it globaly.

    This is another php file.

    PHP Code:
    <?php
    //query coming from the ext lib. combobox auto complete. The post var is called query.
    $submit_query $_POST['query'];
    $build_array = array(Root=>array());     
    $mysqli = new mysqli('localhost','root''root''DB_under');
       if(
    mysqli_connect_errno()) {
               
    printf("Connect failed: %s\n"mysqli_connect_error());
            exit();
       } else {
                
    $query "SELECT * from drug WHERE name LIKE '%$submit_query%'";
            if (
    $result $mysqli->query($query)) {
                if (
    $result) {
                    while (
    $row $result->fetch_row()) {
                       
    array_push($build_array['Root'], array(name=>$row[1], price=>$row[2], number=>$row[3], excerpt=>$row[4]));
                    }
                }
            } else {
                
    printf("Query failed: %s\n"$mysqli->errno);
            }
        }

     echo 
    json_encode($build_array);
    ?>
    There you have it.
    When you type in 4 charactes that are a match you get the list.

    There you have it. Have fun

  2. #2
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    lramos85 is on a distinguished road

      0  

    Default


    Thanks:

    BTW, Add:

    Code:
    hideTrigger:false,
    triggerAction: 'all',
    to

    Code:
    Ext.form.ComboBox
    If you want to be able to select from a dropdown menu without having to type 4 characters.

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    lramos85 is on a distinguished road

      0  

    Default


    pageSize isn't working btw, the pagination works, if more than 10 it displays more than 1 pages but it displays all the query in either page.

  4. #4
    Ext User
    Join Date
    Jul 2008
    Posts
    7
    Vote Rating
    0
    pentex is on a distinguished road

      0  

    Wink exelente documento

    exelente documento


    tengo una pregunta como reliaciono todo esto con una gird ?
    saludos alex

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    7
    Vote Rating
    0
    pentex is on a distinguished road

      0  

    Wink formulario json

    formulario json


    como hacer un formulario que guarde con los metodos json ?

  6. #6
    Ext User
    Join Date
    Apr 2009
    Posts
    7
    Vote Rating
    0
    Acmeous is on a distinguished road

      0  

    Default


    Quote Originally Posted by lramos85 View Post
    Thanks:

    BTW, Add:

    Code:
    hideTrigger:false,
    triggerAction: 'all',
    to

    Code:
    Ext.form.ComboBox
    If you want to be able to select from a dropdown menu without having to type 4 characters.
    This one was necessary cause typing upto 4 characters was a bit more time taking.
    Thanks.

  7. #7
    Ext User
    Join Date
    May 2008
    Location
    Iasi, Romania
    Posts
    18
    Vote Rating
    0
    mephi is on a distinguished road

      0  

    Default


    guys can u change the number of required characters from 4 to less than 4? like 2?

    help me out with this please.

  8. #8
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by mephi View Post
    guys can u change the number of required characters from 4 to less than 4? like 2?

    help me out with this please.
    http://extjs.com/docs/?class=Ext.for...ember=minChars

  9. #9
    Ext User
    Join Date
    May 2008
    Location
    Iasi, Romania
    Posts
    18
    Vote Rating
    0
    mephi is on a distinguished road

      0  

    Default


    thank you