Introduction:
This article explain you to create autocomplete text box using WebAPI , CSS and Javascript .
Description:
Below C# code is used to create a multi column autocomplete text box using WebAPI , CSS and javascipt with out using JQuery autocomplete textbox plugins. Generally to create a autocompelte
text box we use JQuery autocomplete plugins , but with JQuery autocompelte textbox plugins
it is not possible to create a multiple columns autocomplete textbox.
SQL Server Code:-
text box we use JQuery autocomplete plugins , but with JQuery autocompelte textbox plugins
it is not possible to create a multiple columns autocomplete textbox.
To implement this we need to write the code like as shown below
Create table as follows :
HTML Java Script CSS:
<script type="text/javascript">
var pivotPoint;
var currentRequest;
var searchdata;
var y = -1;
function getitems() {
currentRequest = null;
var searchKey = $('#TxtSearch').val();
if (searchKey != '' && searchKey.length > 2) {
currentRequest = $.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../api/Search/SearchEmployees?strSearchkey=" + searchKey + "",
dataType: "json",
beforeSend: function () {
if (currentRequest != null) {
currentRequest.abort()
}
},
success: function (data) {
searchdata = data;
searchResult(data);
},
error: function (result) {
alert("Error");
}
});
}
else {
document.getElementById('dvSearchResult').style.display = "none";
}
}
function searchResult(data) {
var pivotElement = document.getElementById('TxtSearch');
var pos = $("#TxtSearch").position();
var resultitemHtml;
if (data.length > 0) {
resultitemHtml = '<table id=\"tblitemslist\">';
for (var i = 0; i < data.length; i++) {
resultitemHtml += '<tr style=\"cursor: pointer;font: 14px Cambria;width:100%;border:solid 0px red;\">';
resultitemHtml += '<td style=\"text-align:left;border:solid 1px #cccccc;\">' + data[i].Name + '</td><td style=\"width:77px;border:solid 1px #cccccc;\">' + data[i].Gender + '</td><td style=\"width:60px;border:solid 1px #cccccc;\">' + data[i].DeptId + '</td><td style=\"width:67px;border:solid 1px #cccccc;\">' + data[i].Salary + '</td></tr>';
}
resultitemHtml += '</table>';
document.getElementById('dvSearchResult').innerHTML = resultitemHtml;
document.getElementById('dvSearchResult').style.display = "block";
document.getElementById('dvSearchResult').style.height = '200px';
}
else {
document.getElementById('dvSearchResult').innerHTML = '<span style=\"font: 16px Cambria;color:#000;\">No Search Found</span>';
document.getElementById('dvSearchResult').style.display = "block";
document.getElementById('dvSearchResult').style.textAlign = 'center';
document.getElementById('dvSearchResult').style.height = '20px';
}
document.getElementById('dvSearchResult').style.width = $('#TxtSearch').width() + 10 + 'px';
document.getElementById('dvSearchResult').style.top = (pos.top + 25) + 'px';
document.getElementById('dvSearchResult').style.left = (pos.left) - 5 + 'px';
document.getElementById('dvSearchResult').scrollTop = 0;
}
function keynavigation(e) {
var key = document.all ? window.event.keyCode : e.which;
var $listlength = $("#tblitemslist > tbody > tr").length
var $listItems = $('#tblitemslist tr');
$selected = $listItems.filter('.selected');
var $current;
switch (key) {
case 38://UP KEY
$listItems.removeClass('selected');
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
y = $listlength - 1;
}
else {
$current = $selected.prev();
y--;
}
$current.addClass('selected');
break;
case 40://DOWN KEY
$listItems.removeClass('selected');
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
y = 0;
}
else {
$current = $selected.next();
y++;
}
$current.addClass('selected');
break;
default:
getitems();
break;
}
}
</script>
CSS
<style type="text/css">
.DynDivBox {
display: none;
border: solid 1px #999;
background-color: rgba(255, 255, 255, 0.80);
position: absolute;
text-align: left;
vertical-align: top;
border-radius: 2px;
-moz-border-radius: 2px;
}
.DynDivBox table {
width: 100%;
text-align: center;
}
.DynDivBox table td {
padding: 5px;
cursor: pointer;
}
.selected {
background-color: #a5b6c4;
}
</style>HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AutoComplete Text Box with multiple columns with css and javascript</title>
<script src="../scripts-common/jquery-2.1.4.js"></script>
</head>
<body>
<div style=" margin: auto; width: 65%; margin: auto; border: solid 1px #000;">
<b>Auto Complete Text Box with multiple columns using css and java script , with out using Jquery Autocomplete plugins.</b>
<div style="text-align: center; margin-top: 10px; height: 300px;">
<b>Search :</b>
<input type="text" id="TxtSearch" placeholder="Search Items" runat="server" onkeyup="keynavigation(event)" clientidmode="static" style="width: 500px;" />
<div id="dvSearchResult" class="DynDivBox" style="height: 90px; overflow: auto; border: 0px solid #000;"></div>
</div>
<div style="text-align:center;">
<b>© 2016 www.logicspark.in by Muhammad Asif</b>
</div>
</div>
</body>
</html>
C# Web API Controller
using AngularJSCURD.Models;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace AngularJSCURD.Controllers
{
public class SearchController : ApiController
{
string strConnectionString = ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
string strSQLQuery = "";
[HttpPost]
public List<Employee> SearchEmployees(string strSearchkey)
{
IDataReader objIDataReader;
strSQLQuery = "SELECT TOP 5 * FROM tblEmployees WHERE Name LIKE '%" + strSearchkey + "%'";
List<Employee> objEmployeeList = new List<Employee>();
using (SqlConnection con = new SqlConnection(strConnectionString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = strSQLQuery;
cmd.Connection = con;
con.Open();
objIDataReader = cmd.ExecuteReader();
while (objIDataReader.Read())
{
Employee objEmployee = new Employee();
objEmployee.Id = Convert.ToInt32(objIDataReader["Id"]);
objEmployee.Name = objIDataReader["Name"].ToString();
objEmployee.Gender = objIDataReader["Gender"].ToString();
objEmployee.DeptId = Convert.ToInt32(objIDataReader["DeptId"]);
objEmployee.Salary = Convert.ToInt32(objIDataReader["Salary"]);
objEmployeeList.Add(objEmployee);
}
}
}
return objEmployeeList;
}
}
}
DEMO
No comments:
Post a Comment