Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
In this video we will discuss how to display both images and text in the suggestions menu of jQuery autocomplete widget. Let us understand this with an example.
When we type the first character of a country name, we want to retrieve all the countries that start with that letter and display their flag and name in the suggestions menu.
Web Service Code
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace Demo
{
[WebService(Namespace = ”
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class CountryService : System.Web.Services.WebService
{
[WebMethod]
public void GetCountries(string term)
{
string cs = ConfigurationManager.ConnectionStrings[“DBCS”].ConnectionString;
List<Country> countries = new List<Country>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand(“spGetCountries”, con);
cmd.CommandType = CommandType.StoredProcedure;
SqlParameter paramName = new SqlParameter()
{
ParameterName = “@Name”,
Value = term
};
cmd.Parameters.Add(paramName);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while(rdr.Read())
{
Country country = new Country();
country.Id = Convert.ToInt32(rdr[“Id”]);
country.Name = rdr[“Name”].ToString();
country.FlagPath = rdr[“FlagPath”].ToString();
countries.Add(country);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(countries));
}
}
}
jQuery Code
<!DOCTYPE html>
<html xmlns=”
<head runat=”server”>
<title></title>
<script src=”jquery-1.11.2.js”></script>
<script src=”jquery-ui.js”></script>
<link href=”jquery-ui.css” rel=”stylesheet” />
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#txtName’).autocomplete({
minLength: 1,
source: function (request, response) {
$.ajax({
url: ‘CountryService.asmx/GetCountries’,
method: ‘post’,
data: { term: request.term },
dataType: ‘json’,
success: function (data) {
response(data);
},
error: function (err) {
alert(err);
}
});
},
focus: updateTextBox,
select: updateTextBox
})
.autocomplete(‘instance’)._renderItem = function (ul, item) {
return $(‘<li>’)
.append(“<img class=’imageClass’ src=” + item.FlagPath + ” alt=” + item.Name + “/>”)
.append(‘<a>’ + item.Name + ‘</a>’)
.appendTo(ul);
};
function updateTextBox(event, ui) {
$(this).val(ui.item.Name);
return false;
}
});
</script>
<style>
.imageClass {
width: 16px;
height: 16px;
padding-right: 3px;
}
</style>
</head>
<body style=”font-family: Arial”>
<form id=”form1″ runat=”server”>
Country Name : <input id=”txtName” type=”text” />
</form>
</body>
</html>
