Home

Auto-complete

Search keyword with word completion.
Suggest queries or results as users type their query in the search box.

Dependencies

• jQuery ~1.8.3
• tui-code-snippet ~1.0.4
• js-cookie ~1.2.0
  ( If use 1.3.0 or more, You need to include the JSON-js polyfill )

Load

Sample markup

<!-- Form -->
<form id="ac_form1" method="get" action="http://www.popshoes.co.kr/app/product/search" onsubmit="">
    <!-- Searchbox -->
    <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>

    <!-- 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;">Off Autocopmlate</p>
        </div>
    </div>
</form>

Scripts

<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.cookie.js"></script>
<script type="text/javascript" src="lib/code-snippet.min.js"></script>
<script type="text/javascript" src="js/auto-complete.js"></script>
<script type="text/javascript">
    var configruation = {
    //... Write your configuration
    };
    new tui.component.AutoComplete({"config": configruation});
</script>

Configuration

Required Options

• resultListElement: Element for displaying the search result

• searchBoxElement: Input element for searching

• orgQueryElement: Hidden input element for request (use jquery selector)

• subQuerySet: Set of keys of subqueries
  

  /* Example */
  subQuerySet: [
      ['key1', 'key2', 'key3'],
      ['dep1', 'dep2', 'dep3'],
      ['ch1', 'ch2', 'ch3'],
      ['cid']
  ]

• template : Markup templates for each collection, the expression is @key@
  

  /* Example */
  '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']
      }
  },

• listConfig : Configurations for each collection.

  /* Example */
  '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
      }
  },

• actions : Form actions for each colection

  /* Example */
  'actions': [
      "http://www.fashiongo.net/catalog.aspx",
      "http://www.fashiongo.net/search2.aspx"
  ],

• formElement: From element wrapping searchbox

• searchUrl: Search URL

Where applied

• Fashiongo - http://www.fashiongo.net
• Popshoes - http://www.popshoes.co.kr/

Caution

• This component uses JSONP