suggest.js - Input Suggest Library

Japanese / English

This JavaScript library provides easy input suggest.

• The supplementation candidate is displayed based on the content of the input. (like Google Suggest)
• It is not in Ajax, and only when the screen first time is displayed, reads data. later search client side.
• Search the match forward / partial, case-insensitive Yes / No, such as the easy option.
  In addition, various other options are also specified.
• The display number of results can be specified. (The default maximum 20)
• Complementary candidates up and down the keyboard and mouse in the selection.
  Also, the keyboard selection in the ESC key cancel such as operation is possible.
• The space delimited in the supplement can enter multiple keywords.
• IME enter even when the search is done.

Donwload

suggest.js (ver2.1 : 2008/04/02)

->old version.

Demo

• Demo 1 : Simple
• Demo 2 : Load data in external JS file (japanese)
• Demo 3 : Use options
• Demo 4 : Input multi keyword
• Demo 5 : Change complementary candidates (japanese)

Usage

1. Supplement suggestions in the area of style, pre-defined.

   #suggest {
       position: absolute;
       background-color: #FFFFFF;
       border: 1px solid #CCCCFF;
       font-size: 90%;
       width: 200px;
   }
   #suggest div {
       display: block;
       width: 200px;
       overflow: hidden;
       white-space: nowrap;
   }
   #suggest div.select{ /* keydown, keyup */
       color: #FFFFFF;
       background-color: #3366FF;
   }
   #suggest div.over{ /* mouse over */
       background-color: #99CCFF;
   }
   

2. he input form (text boxes) and complementary suggestions to define the area.
   The input form, autocomplete = "off" please. (Browser history to show not so)

   <form onsubmit="return false;">
     <table>
       <tr>
         <td>Input:</td>
         <td>
           <!-- Input form -->
           <input id="text" type="text" name="pattern" value="" autocomplete="off" size="10" style="display: block">
           <!-- suggestion area -->
           <div id="suggest"></div>
         </td>
       </tr>
     </table>
   </form>
   

3. This library (suggest.js) load.

   <script type="text/javascript" src="./suggest.js"></script>
   

4. The window onload event at the Suggest generated.
   The space delimited by multiple keywords, the "new Suggest.Local" part "new Suggest.LocalMulti" please.

   function startSuggest() {
     new Suggest.Local(
           "text",    // input element id.
           "suggest", // suggestion area id.
           list,      // suggest candidates list
           {dispMax: 10, interval: 1000}); // options
   }
   
   window.addEventListener ?
     window.addEventListener('load', startSuggest, false) :
     window.attachEvent('onload', startSuggest);
   

   Suggest.Local argument is described below.
   • first argument: The input element or element id
   • second argument: complementary suggestions area element or element id
   • third argument: complementary candidate searches and an array of strings
   • fourth argument: options

   
   

   The fourth argument is optional, as specified below.
   
   • interval : conduct periodic searches (default 500 ms)
   • dispMax : complementary suggest a number (default is 20). * 0 to specify a maximum and no.
   • listTagName : in order to generate a list of tag names (the default is' div ')
   • prefix : search at match forward (true) / partial (false), switching (the default is false: partial)
   • ignoreCase : searching ignore case (the default is a distinction without a (true))
   • highlight : The search matches highlighted character (the default is highlighted without (false))
   • dispAllKey : CTRL + Down (Opera, CTRL + ALT + Down), complementary to all candidates displayed (the default is no (false))
   • classMouseOver : complementary candidate for mouse over when applied to the style name of the class (the default is "over")
   • classSelect : Complementary candidates to move the cursor when you have selected items that will be applied to the style name of the class (the default is "select")
   • hookBeforeSearch : Search to begin the process of execution of a function before
   • delim : multiple keywords type separators (the default is en quad) * Suggest.LocalMulti effective when used

License

MIT-style license.

see: MIT-LICENSE.txt