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.

Sponsored Link


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

Sponsored Link


License

MIT-style license.

see: MIT-LICENSE.txt

Sponsored Link