filmov
tv
jQuery autocomplete with images and text
Показать описание
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
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 YouTube channel. Hope you can help.
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
{
[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()
{
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>
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').autocomplete({
minLength: 1,
source: function (request, response) {
$.ajax({
method: 'post',
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) {
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>
Link for slides, code samples and text version of the video
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 YouTube channel. Hope you can help.
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
{
[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()
{
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>
<head runat="server">
<title></title>
<script type="text/javascript">
$(document).ready(function () {
$('#txtName').autocomplete({
minLength: 1,
source: function (request, response) {
$.ajax({
method: 'post',
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) {
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>
0:20:12
jQuery autocomplete with images and text
0:11:15
jQuery UI Autocomplete with Images and Custom HTML in PHP
0:07:00
AutoComplete Textbox with Image using jQuery Ajax PHP Mysql and JqueryUI
0:11:09
Ajax AutoComplete Textbox with Image using jQuery UI in PHP
0:24:04
How to add images to jQuery autocomplete
0:01:15
jQuery : Integrating image with jQuery AutoComplete
0:27:10
jQuery Tutorial: jQuery Autocomplete With Ajax & PHP & MySQL
0:10:40
Jquery autocomplete function (video-36)
0:11:40
Autocomplete textbox using jQuery, PHP and MySQL | Ajax AutoComplete Textbox using jQuery UI in PHP
0:06:37
Simple Autocomplete in PHP MySQLi and jQuery UI Tutorial DEMO
0:07:13
jQuery UI Autocomplete input field with JSON Data
0:15:56
jQuery UI autocomplete with PHP and AJAX
0:11:45
Create jQuery UI autocomplete with PostgreSQL PHP and AJAX
0:09:16
Autocomplete Widget in JQuery UI
0:07:46
Using JQuery AutoComplete With Node.Js
0:09:54
JQuery UI Autocomplete to suggest the user as they type with available options from array - Part-1
0:01:33
jQuery : Jquery UI autocomplete - images IN the results overlay, not outside like the demo
0:03:43
Autocomplete textbox with PHP, jQuery and MySql
0:14:15
jQuery AutoComplete suggestions from MySQL data using PHP and Ajax
0:02:07
jQuery autocomplete: How to complete multiple fields when entering data into one of them?
0:01:44
Aurelia Ajax AutoComplete for jQuery
0:01:10
jquery - simple, custom autocomplete, piece, companies, filter
0:01:39
Wordpress: Using jquery autocomplete in wordpress plugin
0:18:47
JQuery Autocomplete show label and submit value (ID) in Spring Boot
Комментарии