CODEWITHSUNDEEP
c#asp.netajaxsearch
sanjeev40084
sanjeev40084

Reputation: 9617

Display search result as you type in ASP.NET

I have a textbox and a literal control on my page. Whenever a user enters search text in the textbox, the HTML code with the result gets generated behind the code and gets added to the literal control.

So, now I am trying to display search result as the user types in the textbox.

Can anyone tell me how i can achieve this?

Upvotes: 1

Views: 5751

Answers (3)

Samich
Samich

Reputation: 30095

As I understand you want to emulate Google behavior.

In this case you need to send ajax request every time when user typed new symbol in your text and substitute html. But you will need change your Literal control to some 'div' or Panel because you can't find Literal control via Javascript. It's just substituted by a html content

ex:

$('#searchbox').keypress(function() {
    $.ajax({
      url: "search.html",
      data: { q: $('#searchbox').val() },
      cache: true,
      success: function(html){
        $("#results").html(html);
      }
    });
});

It's just a sample and probably needs some corrections. But idea in it.

Handling JSON data http://api.jquery.com/jQuery.getJSON/

$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

Upvotes: 1

Robin Maben
Robin Maben

Reputation: 23054

You need to look no further than jQuery UI's autocomplete for remote data sources.

For a textbox like..

<input id="birds" />

You would need to do something like..

$( "#birds" ).autocomplete({ source: "search.php" });

The rest is all just tweaking according to your needs.

Upvotes: 2

JBrooks
JBrooks

Reputation: 10013

I think what you want is JQuery Autocomplete. You can find it HERE.

Upvotes: 1

Related Questions