ansaurus

Question

widget for implementing auto complete for search engine

Answer 1

+1 A:

If you use jQuery or don't mind using it, this autocomplete plugin works like that and is pretty customizable.

EDIT

You'll need a source of data for autocomplete hints - how you develop this is up to you. Let's for the moment pretend that your entire universe of search suggestions is a list of months. And your form will search Google with those suggestions.

Here's what a hint page might look like (in PHP)

hint.php

<?php

$query = $_GET['q'];

$monthList = array(
    'January'
  , 'February'
  , 'March'
  , 'April'
  , 'May'
  , 'June'
  , 'July'
  , 'August'
  , 'September'
  , 'October'
  , 'November'
  , 'December'
);

if ( preg_match_all( "/^" . preg_quote( $query ) . ".*$/im", implode( "\n", $monthList ), $matches ) )
{
  echo implode( "\n", $matches[0] );
}

So now we just need to hook up an autocomplete field to this page as its source of suggestions.

<html>
<head>
  <title>Test Page</title>
  <link rel="stylesheet" href="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://view.jquery.com/trunk/plugins/autocomplete/jquery.autocomplete.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
     $(function()
    {
      $('#search').autocomplete( 'test.php', {} ).result( function( data, value )
      {
        $(this)[0].form.submit();
      } );      
    });
  </script>
</head>

<body>

<form action="http://www.google.com/search"&gt;

<input type="text" id="search" name="q"/><input type="submit" value="Search">

</form>

</body>
</html>

And of course, your search endpoint doesn't have to be Google - could be any other search including one of your own.

Peter Bailey 2009-10-07 18:53:26

Really? I didn't see any way to make the JQuery autocomplete plugin work in tandem with a Search button. Can you point me to an example?

Mike W 2009-10-08 17:47:17

That's up to you to implement. I'll modify my answer w/an example.

Peter Bailey 2009-10-08 19:40:22

Still, my question was how to get the autocomplete to interact with both the text field AND the search button. Your example doesn't address the Search button, so it's not very useful.

Mike W 2009-10-09 13:58:57

Can you better explain what you mean by "interact with"? Because right now I'm not sure I understand the behavior you're after.

Peter Bailey 2009-10-09 14:37:08

Oh, do you mean the "auto-submit-on-select" functionality? Of course you can do that. It makes me wonder if you even bothered to read the documentation for the autocomplete plugin at all. Answer modified to include this.

Peter Bailey 2009-10-09 15:06:56

ansaurus

tags:

views:

answers:

widget for implementing auto complete for search engine

related questions