The following example will demonstrate to you how to implement jquery autocomplete ajax example asp.net. Autocomplete allows the browser to predict the value. It enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
- Keep reading on Simple jQuery Form Validation Example
jQuery Autocomplete Ajax Example JSON
Autocomplete allows the browser to predict the value. It enables users to quickly search and select from a pre-populated list of values as they type, leveraging searching and filtering. The following javascript autocomplete textbox example will demonstrate to you how to add autocomplete to textbox in Html. Find the complete source code below:-
Note: The autocomplete attribute works with the following <input> types: text, search, URL, tel, email, password, date pickers, range, and color.
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery autocomplete ajax example asp.net</title>
<link href="css.css" rel="stylesheet" />
</head>
<body>
<!--BEGIN SEARCH-CONTAINER -->
<div class="search-container">
<div class="search-header">
<h2>jQuery autocomplete ajax example json</h2>
</div><!-- end div .contact-header-->
<!--BEGIN MAIN-CONTAINER -->
<div class="main-container">
<form class="auto-suggest-form">
<fieldset>
<div class="input-field left-align">
<input type="text" id="auto-search" placeholder="Search Here" />
</div><!-- end div .input-field-->
<div class="input-field right-align">
<select id="searchType">
<option value="title">Title</option>
<option value="description">Description</option>
<option value="price">Price</option>
</select>
</div><!-- end div .input-field-->
</fieldset>
</form>
<div class="data-container">
<ul class="data-list">
<li title-val="Awsome Camera" description-val="Awsome Camera is available with free two betteries." price-val="100.70">
<div class="list-img">
<img src="photo1.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Awesome Camera</a>
<p>Awsome Camera is available with free two betteries.</p>
<span>$100.70<</span>>
</div>
</li>
<li title-val="For Photography" description-val="Canon camera 12 mega pixel is best for photography." price-val="765">
<div class="list-img">
<img src="photo1.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">For Photography</a>
<p>Canon camera 12 mega pixel is best for photography.</p>
<span>$765<</span>>
</div>
</li>
<li title-val="Cheap DSLR" description-val="Here is offer for cheap camera, tomorrow will be last date of this offer." price-val="108.01">
<div class="list-img">
<img src="photo1.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Cheap DSLR</a>
<p>Here is offer for cheap camera, tomorrow will be last date of this offer.</p>
<span>$108.01<</span>>
</div>
</li>
<li title-val="New Model Canon" description-val="New Model Canon will be launch in november 2016." price-val="3020.00">
<div class="list-img">
<img src="dslr.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">New Model Canon</a>
<p>New Model Canon will be launch in november 2016.</p>
<span>$3020.00<</span>>
</div>
</li>
<li title-val="Used DSLR" description-val="I want to sell my two years old camera." price-val="76.08">
<div class="list-img">
<img src="dslr.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Used DSLR</a>
<p>I want to sell my two years old camera.</p>
<span>$76.08<</span>>
</div>
</li>
<li title-val="Special Offer For Camera" description-val="We are offering a special discount in october 2016." price-val="340.60">
<div class="list-img">
<img src="photo1.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Special Offer For Camera</a>
<p>We are offering a special discount in october 2016.</p>
<span>$340.60<</span>>
</div>
</li>
<li title-val="Unique Feature Camera" description-val="I want to sell my customized camera with seven lens and other gadgets." price-val="718.54">
<div class="list-img">
<img src="photo1.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Unique Feature Camera</a>
<p>I want to sell my customized camera with seven lens and other gadgets.</p>
<span>$718.54<</span>>
</div>
</li>
<li title-val="Amazing Result" description-val="Amazing Result camera will be available after 1st November." price-val="245">
<div class="list-img">
<img src="dslr.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Amazing Result</a>
<p>Amazing Result camera will be available after 1st November.</p>
<span>$245<</span>>
</div>
</li>
<li title-val="Urgent Sell" description-val="We wanted to urgent sell two hundreds DSLR cameras." price-val="633">
<div class="list-img">
<img src="dslr.png" width="50" height="50" />
</div>
<div class="list-details">
<a href="#">Urgent Sell</a>
<p>We wanted to urgent sell two hundreds DSLR cameras.</p>
<span>$633<</span>>
</div>
</li>
</ul><!-- end div .data-list-->
</div><!-- end div .data-container-->
</div>
<!--END MAIN-CONTAINER-->
</div>
<!--END SEARCH-CONTAINER -->
<script src="autosearch.js"></script>
</body>
</html>Conclusion
I hope you liked this article on jquery autocomplete ajax example asp.net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Leave a Reply