2

I'm trying to make the "Google Instant" like experience (I'm not looking for Auto-complete).

Google instant is the dynamically change the "search result" as you type (not the suggestions, which can be achieved with auto complete).

The page will simply have a text input control, in which as your type, you get result below the text input control.

I know, I must make some async calls on "onKeyPress": So first how can I do that in jquery?

Second, any good tutorials on combining asp.net MVC with Razor and Ajax?

edited: as people were confusing auto-complete with instant result

Raza
  • 394
  • 1
  • 5
  • 15

3 Answers3

1

The term that you should use is 'autocomplete'

Have a look at the link below:

http://docs.jquery.com/Plugins/autocomplete

It's server independant. Basically, on the server side, you must create a service, given a string return the possible values that relate to that string.

Hope this helps.

ysrb
  • 6,693
  • 2
  • 29
  • 30
  • Thanks for answer, but I'm not looking for auto complete. What I'm looking is actually called "google instant" (at least by google), its updating of actual search result as I type I'm looking for. Second, for true mvc the view should only interact with the control, control can route the request to\get data from model (which might a service). Any idea about, I think a basic tutorial on how to make an ajax call in on some event and update the content of a section of the page is called I'm looking for. – Raza Oct 30 '11 at 16:21
1

There is a great article here on how to create an instant search with Jquery, PHP and HTML

http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/

The one caveat I encountered was that you need to put the Javscript code inside a 

$(document).ready(function(){ 
/*Your JS Instant Search goes here */
});

which wasn't clear from the article.

For ASP.NET MVC 3, create a controller/action that returns a JSON or JSONP object. If you're a beginner, this might trip you up as you will get CrossSiteJson errors. This link will help:

Ajax json post to Controller across domains, "not allowed by" Access-Control-Allow-Headers

From doing these two, I was able to do the instant search in MVC3 and it works really well. Using Firebug or WebKit Web Inspector and Fiddler really helps.

Community
  • 1
  • 1
khaihon
  • 235
  • 1
  • 4
  • 13
0

It is still a variant of autocomplete, if you break it down:

  1. Fire autocomplete on key presses.
  2. Fire Ajax search on autocomplete success/load (whatever the event might be).

Writing number 2 is minimal work for you unless somebody has written a plugin that does both. It's a nice little project - write a plugin that combines a text box and div and does autosearch.

Rob Kent
  • 5,183
  • 4
  • 33
  • 54