Introduction
Autosuggest using jQuery
Background
For using jQuery autosuggest we need the js
file "jquery.ui.autocomplete.autoSelect.js". Refer this link for download and
help
http://docs.jquery.com/UI/Autocomplete.
Using the code
Once you have added the aotoselect.js for a
textbox you will get a property named autocomplete
Add a textbox on which yo wish to apply
autosuggest and write the script. My function "GetAllSearchProducts" is getting
all the products beginning with the letter typed in the textbox named "searchproduct"
.
<div>
<input
name=""
type="text"
class="txtF
ui-autocomplete-input" id="searchproduct"
align="absmiddle"
/><input
name=""
type="button"
class="btimg"
align="absmiddle"
onclick="SearchProduct();"
/></div>
<script
type="text/javascript">
$(function
() {
$("#searchproduct").autocomplete({
source:
function (request, response) {
$.ajax({
url:
"../Common/GetAllSearchProducts",
data:
"{ 'name': '" + request.term +
"' }",
dataType: "json",
type:
"POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) {
return data; },
success: function (data) {
if (data != '')
{
response($.map(data,
function (item) {
return {
value: item.Name,
text: item.Id
};
}));
}
},
error:
function (XMLHttpRequest, textStatus,
errorThrown) {
// alert('@T("Alert.Symbol.Msg")');
}
});
},
select:
function (event, ui) {
$(':hidden[id=hdnmedicineid]').val(ui.item.text.toString());
$(':hidden[id=hdnmedicinenm]').val(ui.item.value.toString());
},
minLength: 1,
autoFocus:
true
});
});
</script>
public JsonResult
GetAllSearchProducts(string name = "") { //get all products var
products = _productService.GetAllProducts(name).ToList();
var result = from m in
products select new { m.Id,
m.Name }; return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}