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.3.1 : 2013/02/11)

This code hosting GitHub.
onozaty/suggest.js - GitHub

Demo

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" style="display:none;"></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