Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Show All AutoComplete List / Options on Focus Example

Jun 17, 2016
Introduction:

Here I will explain how to use
jQuery to show all autocomplete list / options on focus with example or jQuery UI display all autocomplete list / options on focus with example or jQuery open autocomplete menu on focus of textbox with example. In jQuery autocomplete by using focus event we can show all autocomplete options on focus.


To show all autocomplete options on focus in textbox using jQuery we need to write the code like as shown below


$('#txtUsers').autocomplete({
source: users,
minLength: 0
}).focus(function() {
$(this).autocomplete("search", "");
});

If you want to full example to show autocomplete list on textbox focus in jQuery write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show All AutoComplete Options on Focus Example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
var users = ['Suresh Dasari',
'Rohini Alavala',
'Sudheer Rayana',
'Madhav Sai',
'Siva Prasad',
'Praveen Alavala',
'Sateesh Chandra',
'Mahendra Dasari'];

$('#txtUsers').autocomplete({
source: users,
minLength: 0
}).focus(function() {
$(this).autocomplete("search", "");
});
})
</script>

</head>
<body>
<form id="form1">
<div>
Enter Name:<input type="text" id="txtUsers" placeholder="Focus in Textbox" style="padding:10px; width:250px" />
</div>
</form>
</body>
</html>

Demo

Check following demo to show all autocomplete list on focus in jQuery.


jQuery Show All Autocomplete List / Options on Focus Example

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Unknown said...

i have one doubt how to bind the image in gridview from the server folder..not using database.and i have bind particular image only not the all images in gridview

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.