How do I create search functionality that can search my web application

Question

How do I create search functionality that can search my web application

Donald Symmons 3,066

How can I create search functionality that can search my entire web application using keywords? I have seen situations where keywords or sentences are typed in the search input box and similar or matching sentences or keywords automatically displays to the user like a dropdown. Then when user clicks on the one, he or she wants, the user will be redirected to the page where that search is found.

Please, how can I create, such that it searches all pages and database as well?

I do not have C# code if that's what is used. I just need to learn how it can be done. Thank you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, shrink-to-fit=no" />

    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <title></title>
    <style>
        .wrap {
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    position: relative;
    width: 100%;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
         <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrap">
            <div class="subbottom" style="width: 100%; margin: 0 auto; margin-bottom: 80px;">
                <br />
                <div class="row col-sm-11" style="width: 100%; margin: 0 auto; padding: 6px;">
                    <div class="col-sm-7" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 6%; margin-top: 6%;">
                        <div style="font-weight: 800; margin-top: 5%; font-size: 11.2vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 1px; text-align: start;">
                            <span style="color: #145c7c; font-family: 'NT Wagner', sans-serif;">A good way</span>
                            <span style="color: #000000; font-family: 'NT Wagner', sans-serif;">to start learning</span>
                        </div>
                        <br />
                        <div class="row col-sm-8" style="width: 100%; margin: 0 auto; padding: 2px; margin-top: 2%; margin-bottom: 7%;">
                            <div>
                                 <asp:TextBox ID="serachtext" runat="server" CssClass="form-control" Width="100%" placeholder="How can we help you?"></asp:TextBox>
                            </div>
                            <span>
                                <button id="Searchbtn" runat="server" class="btn btn-primary" style="height: auto; background-color: #2c395c; border: 0.3px solid #d6d8d9;">
                                    <i class="far fa-search" aria-hidden="true" style="font-size: 11pt; color: white;"></i>
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Accepted answer

1 additional answer

Your answer

Answer 1

Lan Huang-MSFT 30,186 Microsoft External Staff

Hi @Donald Symmons ,

Based on your description, I think you can use TextBox autocomplete: the ability to quickly find and select from a pre-populated list of values as you type, utilizing search and filtering.

You can refer to the demo below, and the source code can be changed according to your needs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

 <script>
        $(function () {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "Ruby",
                "Scala",
                "Scheme"
            ];
            $("#serachtext").autocomplete({
                source: availableTags,
                select: function (event, ui) {
                    location.href = "WebForm1.aspx";
                }
            });
        });
    </script>

User's image

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Donald Symmons 3,066 Reputation points

2023-03-09T05:26:09.04+00:00

Hi @Lan Huang-MSFT , you mentioned the ability to quickly find and select from a prepopulated list; but what if it's a first time search? An auto complete from prepopulated list will not work for a first time search
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-03-09T09:49:59.57+00:00

Hi @Donald Symmons ,

I don't quite understand what you mean by your first search. If you are based on data from a database or data you specify, you can use TextBox autocomplete. But if you search aimlessly, you may want to use an "open source search engine".
Donald Symmons 3,066 Reputation points

2023-03-09T15:39:47.73+00:00

Based on how you described textbox autocomplete; you mentioned that it does pre-populate list of values as I type. So if I understand the pre-populate value, it has to do with populating values that have already been typed in the textbox. For example, if I initially typed "How to get started" in the textbox, when I return to type the same thing or when any user tries to search for the same thing, it will populate the same value which I initially typed. So with that, I thought what if that is the first time such search is being typed in that textbox?

I had an experience with a textbox I have in my project. At first, when I typed my name into the box, it did not populate any value, but re-typing in the textbox populate my name which I already typed in the same textbox. I don't know if you understand what I mean?
AgaveJoe 30,126 Reputation points

2023-03-09T16:01:37.7733333+00:00

At first, when I typed my name into the box, it did not populate any value, but re-typing in the textbox populate my name which I already typed in the same textbox. I don't know if you understand what I mean?

It sounds like you are asking about the browser's autofill feature.

How Do I Disable or Clear AutoFill/AutoComplete Information?
Donald Symmons 3,066 Reputation points

2023-03-09T17:30:15.2866667+00:00

Oh! that autofill is done by the browser. Okay, that's good to know. From @Lan Huang-MSFT 's answer, he uses javasript. Can it be done in server side?
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2023-03-09T19:23:29.6566667+00:00

there are two parts.

client code to implement the search box (often called auto complete). it uses ajax to call the server to get the list. there are several client libraries for this (just google).

the server code that given the search term, returns a list to display. this assumes the server has code to do the search and return results. if you want site search, then you need an indexing technology.
Lan Huang-MSFT 30,186 Reputation points Microsoft External Staff

2023-03-10T02:45:10.9933333+00:00

Hi @Donald Symmons ,

My previous code used the jQuery AutoComplete plugin for autocompletion. You can populate jQuery AutoComplete TextBox through server side.

https://api.jqueryui.com/autocomplete/

If you want to implement browser-like autofill functionality, TextBox has an AutoCompleteType property that you can specify on the server side.(Note

Not all browsers support the AutoComplete feature. Check with your browser to determine compatibility.)

<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>

TextBox5.AutoCompleteType = AutoCompleteType.FirstName;

TextBox.AutoCompleteType Property

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

first you need to pick an search & indexing technology. you will then to expose the database to the indexer and supply a web page api. google "open source search engines"

Share via

How do I create search functionality that can search my web application

1 additional answer

Your answer