Search Bar 'improvement'

[GoogleCodeExporter]

The search feature of flexigrid is indeed very good, but some extra elements 
and redesign can improve the end-user experience.
My users often type the value and just ask "where's the button to click", or 
just "how to reset my search".
Also, the position of the boxes - search before the field name - is a bit 
weird, so, I've redesign a bit:

// new search design
var sDivCSS = { marginRight: '4px' };
var sDiv2 = $('<div/>', { 'class': 'sDiv2' });              
$('<span/>').html(p.findtext).css(sDivCSS).appendTo(sDiv2);
var qtype = $('<select/>', { name: 'qtype' }).css(sDivCSS).appendTo(sDiv2);
var sitems = p.searchitems;
for(var s = 0, sl = sitems.length; s < sl; s++) {
    var optAttr = { value: sitems[s].name };
    if(!p.qtype && sitems[s].isdefault) {
        p.qtype = sitems[s].name;
        optAttr['selected'] = 'selected';
    }
    $('<option/>', optAttr).html(sitems[s].display+'&nbsp;&nbsp;').appendTo(qtype);
}
if(!p.qtype) p.qtype = sitems[0].name;
var q = $('<input/>', { type: 'text', size: 50, name: 'q', 'class': 'qsbox' 
}).css(sDivCSS).appendTo(sDiv2).keydown(function(e) {
    if(e.keyCode == 13) g.doSearch(); 
});
$('<input/>', { type: 'button', value: p.searchtext 
}).css(sDivCSS).appendTo(sDiv2).click(function(e) {
    g.doSearch();
    q.focus();
});
$('<input/>', { type: 'button', value: p.resettext 
}).css(sDivCSS).appendTo(sDiv2).click(function(e) {
    q.val('');
    g.doSearch();
    q.focus();
});
sDiv2.appendTo(g.sDiv);

Original issue reported on code.google.com by harrypit...@gmail.com on 16 Jul 2012 at 4:24

[GoogleCodeExporter]

Please also see http://code.google.com/p/flexigrid/issues/detail?id=130

Original comment by cyborg10...@gmail.com on 23 Jul 2012 at 4:27

[GoogleCodeExporter]

change the values in the css for this class and it will move the find bar 
around the page: .flexigrid div.sDiv /*toolbar*/ 

Original comment by msaxbur...@gmail.com on 18 Aug 2014 at 6:01