Autosuggest using jQuery

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);

}