Menu ▾ ▴

Documentations

Syuaa SE

SuggestSE Documentations

About

SuggestSE is text autosuggest replacement instead using default browser suggestion. Its work under jQuery library. Data source can be taken from server, local array, string, even from element html. Still costumizeable.

Feature

  • Delay request time to minimize server working time for the little different key
  • Costumizeable
  • Easy to inject CSS style
  • HTML5 valid
  • Styling key on list
  • Styling how list appear and disappear
  • Data source taken from server, local Array, local String, event html Element
  • Easy to use
  • Processing any data in different format

Demo

Find it on : http://suggestse.sourceforge.net/

Usage

Download source
Add jQuery.js ( tested on jQuery 1.5.1 ), and SuggestSE.js or SuggestSE.min.js to your path and add them in your HTML :

<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="path/to/SuggestSE.js"></script>

Add same input text, I will recommend if you add attribute id to the input element. 

<input type="text" id="suggest" placeholder="Find Something"/>

Call SuggestSE to your input box with same options 

<script type="text/javascript"">
    $("#suggest").SuggestSE({
        // list option here
    });
</script>

Options

  • delay, Integer, Default 500.

    Delay in millisecond before processing.
  • minChars, Integer, Default 2.

    Minimum character on textbox before continue.
  • maxLists, Integer, Default 10.

    Maximum list to show on the list container.
  • keyStyle, Object.

    Style of key on the list.
  • beforeProc ( jQuery textbox ), Function.

    Function to execute before start processing, return false to cancel process, or true to continue. Return nothing will cancel process.
  • showList ( jQuery listContainer, jQuery textbox ), Function

    Function to use to show list instead just appear. You will need to change listContainer css style to display:block;.
  • hideList ( jQuery listContainer, jQuery textbox ), Function

    Function to use to hide list instead just disappear. You will need to change listContainer css style to display:none;. This option will skip if listContainer is set. If you need to hide listContainer, than you need to do that by your self on onSelect option.
  • onSelect ( String Value, String Text, jQuery textbox, jQuery listContainer ), Function.

    Function to execute when user select any option on the list.
  • ignoreCase, Boolean, Default false.

    Ignore case when filtering list. Will not apply on sourceURL is set.
  • sourceURL, String.

    Ajax url to send request data. Will skip filtering data on javascript. Do it on server.
  • sourceURLType, String, Default json.

    Expected return data from server, it can be text, array, or json. Array and json will have the same process. On php you can use json_encode on server to create data.
  • sourceURLMethod, String, Default get.

    Request method to server, use post or get only.
  • sourceURLParam, Object.

    Additional params to send to server.
  • sourceURLKey, String, Default q.

    String to use as key of textbox value to send to server
  • sourceObj, Object.

    Data source from javascript array object to filter.
  • sourceStr, String.

    Data source from javascript string to filter, Will require any delimiter as separator for each data.
  • sourceEle, HTML Element, jQuery Selector.

    Filter data from any exists html element.
  • sourceEleChild, jQuery Selector, Default li.

    Selector of sourceEle child to use as data to filter.
  • sourceEleText, String.

    Attribute name of sourceEleChild to use as text on list. Don't set to use innerHTML.
  • sourceEleValue, String.

    Attribute name of sourceEleChild to use as value on list. Don't set to use innerHTML.
  • textDelimiterData, String, Default new line.

    String separator for each data on sourceStr
  • textDelimiterValue, String.

    String separator between text and value on each data String.
  • keyTextIndex, String.

    Key or Index of json/array object as text of list.
  • keyValueIndex, String.

    Key or Index of json/array object as value of list.
  • showAllOnEmpty, Boolean, Default false.

    Will show all possible list if textbox is empty. This option will not work if data source is from server ( or sourceURL is set ). I suggest to use this option only on listContainer option is set.
  • listContainer, jQuery ID Selector.

    Custom listContainer instead use default SuggestSE container. This option will disable hideList option. Dont add "#" in front of ID name.
  • listContChildTag, String HTML tag, Default li.

    HTML tag to use as list on listContainer, only work if option listContainer is set.
  • listContChildMod ( jQuery Current List, String Value, String Text, jQuery listContainer, jQuery textbox, String Text with Style ), Default function() { $(jQuery Current List).html(String Text with Style) }.

    Function to call when list object is created. You will need to fill this current list value. SuggestSE will not set value of attribute value and/or innerHTML of current list when option listContainer is set. You will need to do it your self using this function.

Styling

To fill style to listContainer, you can create your own css style on your head tag. listContainer is a ul tag with class .suggest-se-container, each list is li tag, they have class .selected on selected. You can add this tag to your head as default style, I use it.

<style>
.suggest-se-container {
    list-style-type:none;
    margin:5px 0px 0px 0px;
    padding:0px;
    border:1px solid #ACA899;
    background:#fff;
    font-size:12px;
    width:202px;
}
.suggest-se-container li {
    padding:2px 4px;
    cursor:pointer;
}
.suggest-se-container li:hover,
.suggest-se-container li.selected {
    background:#306CC5;
    color:#fff;
}
input[type=text]{
    width:200px;
}
</style>

If your textbox had attribute ID, listContainer will also had class your_textbox_id-ssecid. For example, if your textbox id is "demo7", your listContainer class is "suggest-se-container demo7-ssecid".

License

SuggestSE is released under the MIT license.

Bug Report

If you find any bug, you can sent it to my mail. I'll try to learn sourceforge.net bug tracker later. :)

Contribute

I've no idea for this. Just tell me if you want to contribute what ever you want.
You may want to fix same bug, or creating logo for this simple SuggestSE or creating demo page, or and more another 'or'.

MongoDB Logo MongoDB