Instant Search With Keyup_问答_开发者_运维开发者技术经验分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
    <script type="text/javascript">

    google.load('search', '1');

    function OnLoad() {

      // create a tabbed mode search control
      var tabbed = new google.search.SearchControl();

      // create our searchers.  There will now be 3 tabs.
      tabbed.addSearcher(new google.search.WebSearch());

      // draw in tabbed layout mode
      var drawOptions = new google.search.DrawOptions();开发者_如何学C
      drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);

      // Draw the tabbed view in the content div
      tabbed.draw(document.getElementById("content"), drawOptions);

    }
    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="content">Loading...</div>
  </body>
</html>

Hi,

If you copy paste the code above you will see google basic search from code playground

Instead of clicking the search button or enter(submit) to give the results I want the form to submit at keyup, this way it will be like instant search. I tried looking in the files and explored with firebug in every angle but I can't make it work. I hope someone can point me in the right direction.

Your 'mock up' is a bit different since it actually has an input field(physical html). In the google code there is no physical html for input. All there is, is div id="content" That might be the problem for IE8. It is the only thing I can imagine..The weird thing is that if I copy all the physical html from firebug(or whatever tool, in between the div content) I can't seem to modify anything... By the way all of the code so far has worked in chrome. And I'm using IE 8.0.6001. This is the error message: 'undefined' is null or not an object index.html, line 29 character 1 ,witch is: inputBox.onkeyup = function(){

(Oh, somehow I'm not able to comment...)

Its a little bit of a hack, but you could add something like this:

1. var inputBox = document.forms[0].search;
2. inputBox.onkeyup = function(){tabbed.execute(inputBox.value);}

Creates a reference to the input box. In the code playground example it is the first form on the page forms[0] and the input box's name is search (name="search").
Will add a function that will run onkeyup on the input box. The function will execute the search (tabbed.execute) passing it the value from the input box (inputBox.value).

It will cause the search to run when ever the user presses a key. However as Geoff Adams has stated, doing the search on every key press is really bad practice. If a user is on a slow connection, its going to be wasting bandwidth, you may also find its against Google's TOS to perform so many searches.

You could possibly make the experience a lot better by doing something like this:

  1. var wait = 0;
  2. var inputBox = document.forms[0].search;
  3. inputBox.onkeyup = function(){
  4.   clearTimeout (wait);
  5.   wait = setTimeout(function(){
  6.     tabbed.execute(inputBox.value);
  7.   },1000);
  8. }

Create a holder which will do the search.
Link to the input box.
Add a function to run onkeyup.
Clear any search which maybe waiting to happen.
Create a timeout passing it a function to run when the timeout occurs.
Set the function to search passed on the text in the input box.
Set the timeout for 1 second (1000 miliseconds)
Finished

Now you still have the search onkeyup, but if the user keeps typing, it will forget the last search, so after 1 second of not typing, the search will be performed.

Try adding the code to the code playground after:

// Search! tabbed.execute("Subaru STI");

And clicking Run Code.

Note: I haven't tested this in anything other than Chrome, IE8 won't even load Code Playground for me!!!

Typical IE.......

Ok give this a try:

Instead of:

var inputBox = document.forms[0].search;

Change it to:

var inputBox = document.getElementsByName("search")[0];

So instead of trying to use the form access, you are actually searching for all elements with the name search, this will be an array, so assuming there is only one search input, its the first one ([0]) that you want to access.

var wait = 0;
var inputBox = document.getElementsByName("search")[0];
inputBox.onkeyup = function(){
  clearTimeout (wait);
  wait = setTimeout(function(){
    tabbed.execute(inputBox.value);
  },1000);
}

OK so I finally got round to having a quick look at Googles Doc's for the SearchForm.

Looks like Google gives DOM access to the input box, instead of relying on the javascript engine to find it, quite simply tabbed.input in this case because tabbed is the search object. Give this a try (I'll leave all the above incase its useful to anyone else)

  var wait = 0;
  var inputBox = tabbed.input;
  inputBox.onkeyup = function(){
    clearTimeout (wait);
    wait = setTimeout(function(){
      tabbed.execute(inputBox.value);
    },1000);
  }