JavaScript Autocomplete Textbox Tutorial
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. In this asp.net tutorial, we will discuss javascript Autocomplete Textbox.
Note: The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
- US phone number validation in JavaScript using regular Expression
- Convert JSON Date to Javascript Date Format
Create Autocomplete Textbox JavaScript
Find the code snippet below:-
javascript autocomplete textbox in asp.net AutoSearch.js var s = 'auto-search'; var c = 'title-val'; var d = 'description-val'; var p = 'price-val'; var fl = false; var dt = []; document.getElementById(s).onkeyup = function() { var searchType = document.getElementById("searchType"); selectedSearch = searchType.options[searchType.selectedIndex].value; var searchVal = this.value.toLowerCase(); var itemName = ''; if (selectedSearch === 'title') { var filterItems = document.querySelectorAll('[' + c + ']'); itemName = c; } if (selectedSearch === 'description') { var filterItems = document.querySelectorAll('[' + d + ']'); itemName = d; } if (selectedSearch === 'price') { var filterItems = document.querySelectorAll('[' + p + ']'); itemName = p; } for (var i = 0; i = 0) { filterItems[i].style.display = dt[i]; } } fl = true; } function dataShow(element) { var elementCss = element.currentStyle || window.getComputedStyle(element, ""); return elementCss.display; } Style.css @charset "utf-8"; /* CSS Document */ /* === HTML Section === */ body { font-family: Helvetica,Arial,sans-serif; font-size: 14px; color: #58666e; background: #F5F5F5; } .search-container { width: 835px; margin: 50px auto; padding: 35px; border: 1px solid #cbcbcb; background-color: #FFF; } .search-header { width: auto; height: 50px; background-color: #F5F5F5; border: 1px solid #cbcbcb; border-bottom: none; padding-left: 22px; } .search-header h2 { font-weight: 500; } .main-container { padding: 10px; border: 1px solid #cbcbcb; position: relative; } .data-container { min-height: 200px; max-height: 300px; overflow: scroll; } /* === List Section === */ ul.data-list { list-style: none; } ul.data-list li { width: 92%; height: auto; float: left; padding: 13px; border: 1px solid #cbcbcb; } ul.data-list li:hover { background-color: #F5F5F5; } .list-img, .list-details { float: left; } .list-img { width: 11%; } .list-details { width: 80%; line-height: 5px; } .list-details a { font-weight: bold; color: #58666e; text-decoration: none; } /* === Form Section === */ form.auto-suggest-form .input-field { width: 49%; } form.auto-suggest-form .right-align { float: right; } form.auto-suggest-form .left-align { float: left; } form.auto-suggest-form fieldset { border: none; } form.auto-suggest-form input { width: 96.2%; padding: 5px 4px; } form.auto-suggest-form *:focus { outline: none; } form.auto-suggest-form textarea { width: 98.4%; padding: 5px 4px; } form.auto-suggest-form select { width: 99.5%; padding: 5px 2px; color: #58666e; }Autocomplete textbox in javascript demo
For PhotographyCanon camera 12 mega pixel is best for photography.
$765> Cheap DSLRHere is offer for cheap camera, tomorrow will be last date of this offer.
$108.01> New Model CanonNew Model Canon will be launch in november 2016.
$3020.00> Used DSLRI want to sell my two years old camera.
$76.08> Special Offer For CameraWe are offering a special discount in october 2016.
$340.60> Unique Feature CameraI want to sell my customized camera with seven lens and other gadgets.
$718.54> Amazing ResultAmazing Result camera will be available after 1st November.
$245> Urgent SellWe wanted to urgent sell two hundreds DSLR cameras.
$633>
Autocomplete Textbox in Javascript Demo | Download Source Code
Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.
The post JavaScript Autocomplete TextBox Example appeared first on Dot Net Tutorial, C# Tutorial, Google Maps API JavaScript, Dot Net Tricks.
This post first appeared on Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps API Developer, please read the originial post: here