jQuery autocomplete with images and text

Рет қаралды 28,246

Күн бұрын

Link for all dot net and sql server video tutorial playlists
www.youtube.co...
Link for slides, code samples and text version of the video
csharp-video-tu...
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our KZbin channel. Hope you can help.
/ @aarvikitchen5572
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 = "tempuri.org/")]
[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="www.w3.org/1999...">
<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>

Пікірлер: 13

@roadtripping Жыл бұрын

You didn't have to close the with ?

@raman-jn6yt 6 жыл бұрын

well explained but one question. When you created updateTextBox(event, ui) function and called it from 'focus' and 'select' event, you didn't pass arguments then how it was able to get the 'event' and 'ui' parameters?

@nbtion 7 жыл бұрын

This is best tutorial for jQuery Step by Step (Thank)

@aalmohalla391 9 жыл бұрын

Yessss, finally with images thank u so much.

@CodingSquid 6 жыл бұрын

Nice example! Is to possible to store/pull the image from the database? Let me guess, absolutely! Many thanks.

@dosovi4548bustayes 9 жыл бұрын

Thank you for your videos

@josephregallis3394 6 жыл бұрын

Venkat, when do you use a 'post' and when do you use a 'get'? I get confused on this and I haven't heard a good explanation from you on how to choose these.

@Csharp-video-tutorialsBlogspot 6 жыл бұрын

Hello Joseph - In addition to GET and POST. We also have PUT and DELETE. The following is the general rule for using these HTTP verbs GET - To retrieve data POST - To create a new item PUT - To update an item DELETE - To delete an item

@josephregallis3394 6 жыл бұрын

OK. Thanks.