CODEWITHSUNDEEP
asp.net-mvc-3jqueryasp.net-ajaxrazor
Raza
Raza

Reputation: 394

Using asp.net mvc 3 + Razor with Ajax and jquery

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

Upvotes: 2

Views: 1198

Answers (3)

khaihon
khaihon

Reputation: 235

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.

Upvotes: 1

Rob Kent
Rob Kent

Reputation: 5203

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.

Upvotes: 0

ysrb
ysrb

Reputation: 6740

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.

Upvotes: 1

Related Questions