Auto Complete Tutorial

Load all required files

All of the required files should be loaded first.

...
<script type="text/javascript" src="jquery1.8.3.js"></script>
<script type="text/javascript" src="code-snippet.js"></script>
<script type="text/javascript" src="component-auto-complete.js"></script>
...

Creating Auto Complete with options

You can set each options such as

Name	Description
resultListElement	Result list wrapper element
searchBoxElement	Input element
orgQueryElement	Hidden element for original query form user
toggleBtnElement	Auto complete switch button element
onoffTextElement	Auto complete state(on,off) display element
toggleImg	Auto complete state(on, off) images
viewCount	List item count for each collection
subQuerySet	Key arrays (sub query keys' array)
listConfig	Config for auto complete list by index of collection
template	Mark up for each collection (Default markup is defaults) This markup has to have "keywold-field" but title
actions	Action attribute for each collection
staticParams	Set static options for each collection
useTitle	Whether use title or not
formElement	Form element that include search element
cookieName	Cookie name for save state
mouseOverClass	Class name for selected element
searchUrl	Auto complete API
searchApi	Auto complete API request config

<!-- Form tag -->
<form id="ac_form1" method="get" action="http://www.popshoes.co.kr/app/product/search" onsubmit="">
    <!-- Input element area -->
    <div class="inputBox">
        <input class="inputBorder" id="ac_input1" type="text" name="q" autocomplete="off">
        <input type="hidden" id="org_query" name="org_query">
    </div>

    <!-- Auto complete result area -->
    <div class="suggestBox" id="ac_view1" style="width:269px;">
        <div class="baseBox">
            <ul class="_resultBox" style="display:none;">
                <li><a href="#" onclick="return false;" title="">@txt@</a></li>
            </ul>
            <p id="onofftext" class="bottom" style="display:none;">Turn off</p>
        </div>
    </div>
</form>

var Plane = {
    'resultListElement': '._resultBox',
    'searchBoxElement':  '#ac_input1',
    'orgQueryElement' : '#org_query',
    'toggleBtnElement' : $("#onoffBtn"),
    'onoffTextElement' : $(".baseBox .bottom"),
    'toggleImg' : {
        'on' : '../img/btn_on.jpg',
        'off' : '../img/btn_off.jpg'
    },
    'viewCount' : 3,
    'subQuerySet': [
        ['key1', 'key2', 'key3'],
        ['dep1', 'dep2', 'dep3'],
        ['ch1', 'ch2', 'ch3'],
        ['cid']
    ],
    'listConfig': {
        '0': {
            'template': 'department',
            'subQuerySet' : 0,
            'action': 0
        },
        '1': {
            'template': 'srch_in_department',
            'subQuerySet' : 1,
            'action': 0
        },
        '2': {
            'template': 'srch_in_department',
            'subQuerySet' : 2,
            'action': 1,
            'staticParams': 0
        },
        '3': {
            'template': 'department',
            'subQuerySet' : 0,
            'action': 1,
            'staticParams': 1
        }
    },
    'template' :  {
        department:    {
            element: '<li class="department">' +
                '<span class="slot-field">Shop the</span> ' +
                '<a href="#" class="keyword-field">@subject@</a> ' +
                '<span class="slot-field">Store</span>' +
            '</li>',
            attr: ['subject']
        },
        srch : {
            element: '<li class="srch"><span class="keyword-field">@subject@</span></li>',
            attr: ['subject']
        },
        srch_in_department :    {
        element: '<li class="inDepartment">' +
            '<a href="#" class="keyword-field">@subject@</a> ' +
            '<span class="slot-field">in </span>' +
            '<span class="depart-field">@department@</span>' +
        '</li>',
        attr: ['subject', 'department']
        },
        title: {
            element: '<li class="title"><span>@title@</span></li>',
            attr: ['title']
        },
        defaults: {
            element: '<li class="srch"><span class="keyword-field">@subject@</span></li>',
            attr: ['subject']
        }
    },
    'actions': [
        "http://www.fashiongo.net/catalog.aspx",
        "http://www.fashiongo.net/search2.aspx"
    ],
    'staticParams':[
        "qt=ProductName",
        "at=TEST,bt=ACT"
    ],
    'useTitle': true,
    'formElement' : '#ac_form1',
    'cookieName' : "usecookie",
    'mouseOverClass' : 'emp',
    'searchUrl' : 'http://10.24.136.172:20011/ac',
    'searchApi' : {
        'st' : 1111,
        'r_lt' : 1111,
        'r_enc' : 'UTF-8',
        'q_enc' : 'UTF-8',
        'r_format' : 'json'
        }
    }
}

new ne.component.AutoComplete({"config" : Plane});

Sample

https://nhnent.github.io/tui.component.auto-complete/latest/tutorial-sample1.html

Notices

• This component use jsonp.
• Search for only form submit.