help binding pqgrid to input element.

[larksys]

I have a grid that lists last names that begin with whatever is typed into an input field.  What I need is the ability to refresh the grid after each letter typed.  It would be handy to only bind when there are 3 or more characters typed.  As of now it only works when the input element loses focus.

The input element;
<div id="userslistdiv" style="display:none"></div>
<cfdiv bind="url:dspNameSuggest.cfm?namesuggest={namesuggest}" bindonload="yes" id="namesuggestdiv">

The dspNameSuggest page;
<cfset ajaxOnLoad("initSBScript")>


The pqgrid code;
<script type="text/javascript">
    var Vnamesuggest = '';

    function initSBScript() {

        $(document).ready(function() {

            CloseGrid = function() {
                $('##userslistdiv').pqGrid('destroy');
                $('##userslistdiv').hide;
            }

            $('.namesuggestselector').on('keydown', function() {
                Vnamesuggest = this.value;
                //alert(Vnamesuggest);
                $('##userslistdiv').show();
                var colM = [{
                    title: 'IndivID',
                    width: 60,
                    dataType: 'integer',
                    editable: false
                }, {
                    title: 'Name',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'Company',
                    width: 200,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'City',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }];
                var dataModel = {
                    location: 'remote',
                    dataType: 'JSON',
                    method: 'GET',
                    paging: 'local',
                    rPP: 15,
                    rPPOptions: [15, 30, 45],
                    getUrl: function() {
                        return {
                            url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
                        };
                    },
                    getData: function(response) {
                        return {
                            data: response.DATA
                        };
                    }
                }

                $('##userslistdiv').pqGrid({
                    width: 560,
                    height: 470,
                    title: 'Select Participant',
                    dataModel: dataModel,
                    colModel: colM,
                    scrollModel: {
                        horizontal: false
                    },
                    flexHeight: true,
                    cellClick: function(evt, ui) {
                        var $td = $(evt.currentTarget).closest('td');
                        if ($.isNumeric($td.text())) {
                           GSIDval = $td.text();
                            alert(GSIDval);
                        };
                    }
                });
            });

        });
    };
</script>

[paramvir]

1 you could bind keydown or keyup event to the input text box.

2 Pass the entered text as parameter to the url

3) Call refreshDataAndView method of the grid so that grid makes remote request to the server and refreshes itself with new data.

[larksys]

I forgot the input element in the code I provider.  It's on the main page;
<cfinput type="text" name="namesuggest" id="namesuggest" size="25" maxlength="200" value=" " class="namesuggestselector" />

I thought I was binding a keydown event.

[larksys]

1. The keyup or keydown is not the best way.  EVERY key causes the event to fire.
2.  After the initial character entry, I get a list in the grid.  After that I only get a blank grid.


<script type="text/javascript">
    var Vnamesuggest = '';

    function initSBScript() {

        $(document).ready(function() {

            CloseGrid = function() {
                $('##userslistdiv').pqGrid('destroy');
                $('##userslistdiv').hide;
            }

            $('.namesuggestselector').on('keyup', function() {
                Vnamesuggest = $.trim(this.value);
                //alert(Vnamesuggest);
                $('##userslistdiv').show();
                var colM = [{
                    title: 'IndivID',
                    width: 60,
                    dataType: 'integer',
                    editable: false
                }, {
                    title: 'Name',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'Company',
                    width: 200,
                    dataType: 'string',
                    editable: false
                }, {
                    title: 'City',
                    width: 150,
                    dataType: 'string',
                    editable: false
                }];
                var dataModel = {
                    location: 'remote',
                    dataType: 'JSON',
                    method: 'GET',
                    paging: 'local',
                    rPP: 15,
                    rPPOptions: [15, 30, 45],
                    getUrl: function() {
                        return {
                            url: 'cfc/basic.cfc?method=getIndivs&namesuggest=' + Vnamesuggest
                        };
                    },
                    getData: function(response) {
                        return {
                            data: response.DATA
                        };
                    }
                }

                $('##userslistdiv').pqGrid({
                    width: 560,
                    height: 470,
                    title: 'Select Participant',
                    dataModel: dataModel,
                    colModel: colM,
                    scrollModel: {
                        horizontal: false
                    },
                    flexHeight: true,
                    cellClick: function(evt, ui) {
                        var $td = $(evt.currentTarget).closest('td');
                        if ($.isNumeric($td.text())) {
                           GSIDval = $td.text();
                            alert(GSIDval);
                        };
                    }
                });
            });

        });
    };
</script>