I used the following code to search datagrid. The search functionality works only when the user click the search button on the toolbar. it does not work with Enter Key. I want to use Enter key to submit the search term.
<style type="text/css">
.mystyle{
line-height:16px; width:120px;
}
</style>
<table id="itemdg" fit="true" url="data/get_data.php" style="padding:10px;" class="easyui-datagrid" pagination="true" toolbar="#toolbar" rownumbers="true" fitColumns="true">
<thead>
<tr>
<th field="description" width="auto" halign="center" sortable="true">Description</th>
<th field="code" width="auto" halign="center" align="center" sortable="true">Code No</th>
<th field="unit" width="auto" halign="center" sortable="true">Unit</th>
<th field="city" halign="center" width="auto" align="left" sortable="true">City</th>
</tr>
</thead>
</table>
<div id="toolbar">
<span>Code No:</span>
<input id="codeno" class="easyui-textbox mystyle">
<span>CityName:</span>
<select id="city" class="easyui-combobox mystyle">
<option value="1">Kolkata</option>
<option value="2">Delhi</option>
</select>
<a href="#" id="esearch" class="easyui-linkbutton" iconCls="icon-search" onclick="itemSearch()">Search</a>
</div>
Js
function itemSearch(){
$('#itemdg').datagrid('load',{
code: $('#codeno').textbox('getValue'),
city: $('#city').combobox('getValue')
});
}
Here is my attempt to use Enter Key Press:
$(function() {
$(".mystyle").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('#esearch').click();
return false;
} else {
return true;
}
});
});
My attempt code does not work. There is no error in the console. Please help.