Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

[Solved] Autocomplete textbox jquery asp.net

Autocomplete textbox jquery:


In this tutorial, I am going to show you "autocomplete textbox jquery asp.net". JQuery autocomplete facility provides auto-complete and the auto-suggest keyword for the textbox input field like google search, there are multiple ways you can go for autocomplete textbox in JQuery.
Here is the example of asp.net c# textbox which will show you how you can implement an autocomplete textbox in Jquery.

Autocomplete textbox jquery,like google search,asp.net
Autocomplete textbox jquery


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocomplete.aspx.cs" Inherits="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 runat="server">
   <title></title>
  
   <%--add these file in head tag--%>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> 
   <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />  

   <script type="text/javascript">
        $(document).ready(function () {
            var availableTags = [
                     "ActionScript",
                     "AppleScript",
                     "Asp",
                     "BASIC",
                     "C",
                     "C++",
                     "Clojure",
                     "COBOL",
                     "ColdFusion",
                     "Erlang",
                     "Fortran",
                     "Groovy",
                     "Haskell",
                     "Java",
                     "JavaScript",
                     "Lisp",
                     "Perl",
                     "PHP",
                     "Python",
                     "Ruby",
                     "Scala",
                     "Scheme"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <div class="demo">
            <div class="ui-widget">
                <asp:Label ID="Label1" runat="server" Text="Enter Text here"></asp:Label>
                <asp:TextBox ID="tags" runat="server"></asp:TextBox>
            </div>
        </div>
    </form>
</body>
</html>

Read More

Check if value exists in array jquery - Solved

Introduction: In this tutorial, I am going to discuss about to check if the value exists in an array or not using jquery. The whole process done under the  <script></script> tag. Let's see. Check if the value already exists in array jquery 


Steps:
1. Make a function name like valexixts.
2. Declare an array[] of var type.
3. Add Jquery Library CDN link.

Coding Part:


<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
        function valexixts() {          
            var items = ['bat''ball''shirt''chair' 'fridge''tv'];
            var item = $('#txtItem').val();
if ($.inArray(item, items) != -1) 
            {
                $('#lblmsg').html(item + ' found');
            }
            else {               
                $('#lblmsg').html(item + ' not found');
            }
        }
    </script>
</head>
<body>
    <input type="text" id="txtcheck" />
       <button type="button" onclick="valexixts();">Check</button><br />
 <span id="lblmsg"></span>
</body>
</html>



Read More

Textbox onchange event in jquery with asp.net and html control

In this, tutorial we will see about the "onchange event in jquery" with both controls (Asp.net control and HTML control).  Most of the time during development we face problems that our "Jquery onchange event not working" behind this problem there is a reason we did not call the control properly. See the full tutorial to implement Jquery Onchange Event.

Jquery onchange event not working


Steps


1. Always use Jquery Cdn file e.i. 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

2. Don't forget to add a # symbol during control calls.

3. To call asp.net control we have use this ('#<%=ASPtxtbox.ClientID%>') because of  runat="server"
4. To call HTML always use this ("#HTMLtxtbox").



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Onchange-event-jquery.aspx.cs" Inherits="Onchange_event_jquery" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#<%=ASPtxtbox.ClientID%>').change(function ()
            {
                alert('Change Event Done by asp.net control');
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $("#HTMLtxtbox").change(function ()
            {
                alert('Change Event Done by HTML control');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Asp.net Control onchane Test</td>
                    <td>
                        <asp:TextBox ID="ASPtxtbox" runat="server"></asp:TextBox>
                    </td>
                </tr>

                <tr>
                    <td>HTML Control onchange Test</td>
                    <td>
                        <input type="text" id="HTMLtxtbox" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>


Also Read:

Read More