CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-3
aknuds1
aknuds1

Reputation: 67987

How do I implement an instant search box with ASP.NET MVC 3 / jQuery?

I'd like to add an instant search box, similar to the Google search one, to my ASP.NET MVC 3 application. That is to say, as one types into the search box, the application should automatically show corresponding search results and a dropdown menu with suggestions appear beneath the box. There should also be a control for clearing the box (the X at the right of the Google search box).

I'm fairly new to web app development, but I'm guessing Javascript is required. We're going to use jQuery in this project, although we haven't added any Javascript yet.

So how can I implement the search box UI specified above? Is there some ready-made jQuery component?

Upvotes: 3

Views: 8575

Answers (3)

Nicholas Murray
Nicholas Murray

Reputation: 13533

Here's a great blog post to get you started utalising jQuery Autocomplete with Razor Web Pages and a SQL CE Database.

Upvotes: 4

user338195
user338195

Reputation:

How does quick search work?

Focus is set on a textbox. User hits a key and on a keyup javascript event (depending on a browser) you will send a content of that textbox to a web server.

Web server will read that content, generate a result, potentially a view model listing 10 results and it will pass that result back to the web browser.

You will then you jQuery to take that result and paste it in some div, e.g. Content goes here

This is very basic, but it will work. It's important to consider performance as there will be quite a few requests sent to the server.

Edit: In regards to quick search plugins - yes there are some, but you need to be aware of how it works and what might go wrong, so prior to using a plugin, write something very basic to see how it all works. Good luck.

Upvotes: 0

Peter Bridger
Peter Bridger

Reputation: 9323

I'd suggest looking into using jQuery UI for it's auto complete component.

It can be rigged up to either look at a predefined local list of data or to perform a real-time search as the user types.

The code for a simple example using a static lookup is below:

<script>
    $(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>



<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

</div><!-- End demo -->



<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

Upvotes: 3

Related Questions