Jquery smartSelects plugin

Use to create more intelligent dropdown select, support ajax data resource.

Load

git clone https://github.com/lizus/jquery.smartSelects.git

after download, see dist/index.html for more detail.

Sample html code

<div class="smartSelect" data-component="smartSelect" data-total="2" data-row="10">
  <textarea class="smartSelect-value hidden" data-type="jsonp" data-field="value" name="sample"></textarea>
  <textarea class="smartSelect-source hidden" data-type="jsonp" data-field="source"></textarea>
  <input class="smartSelect-ajax hidden" type="hidden" data-type="string" data-field="ajax" value="https://sample.com" />
  <ul class="selected-ul" data-field="selected"></ul>
</div>

Specification

• data-component="smartSelect" component identify code, if use it before us, it will auto load. else use $(this).smartSelect(); load
• data-total="2" the max select option count
• data-row="10" only ajax use. if less then settled value(10), it will get new value from ajax
• data-field="value" selected value. jsonp string, decode sample:

  [
    {
      key: 'hello',
      value: 'world'
    },
    {
      key: 'hello',
      value: 'world'
    },
  ]

• data-field="source" select option resource, format as value
• data-field="ajax" ajax resource url,only support get method. If get values, it will settle data-field="ajax-source",data-ajax-source="{search keyword}"
• data-field="selected" the display element for selected value

Events

when click: selected-click
when input change: selected-change
when leave: selected-leave
when selected-click, it will set data-status="active" to the main component to tag the activity status.
when selected-leave, it will set data-status="leave" to the main component to tag the leave status.