Share Blog

Monday, August 11, 2014

Autocomplete Input In TextBox Using Asp.net

Discription
Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are Fruit for Fruit Name, give "a" (for Apple or Grapes) a try

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQuery_AutoComplete.aspx.cs" Inherits="JQuery_AutoComplete" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat ="server">
  <title>jQuery UI Autocomplete</title>
  <link type="text/css" rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"/>
  <script type ="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script type ="text/javascript"src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link  type="text/css" rel="stylesheet" href="/resources/demos/style.css"/>
  <script type ="text/javascript">
      $(function () {
          var fruitname = [
      "Mango",
      "Apple",
      "Grapes",
      "Banana",
      "BeetRoot",
      "Carrot",
      "Chery",
      "Date",
      "Guava",
      "Kiwi Fruit",
      "Water Melon",
      "Orange",

    ];
          $("#fruit").autocomplete({
              source: fruitname
          });
      });
  </script>
</head>
<body>
    <form id="form1" runat="server">
<div class="div_lang">
    <asp:Label ID="lblname" runat="server" Text="Fruit"></asp:Label>
    <asp:TextBox ID="fruit" runat="server"></asp:TextBox>

</div>
    </form>
</body>
</html>

No comments:

Post a Comment