SelectPage – simple and powerful drop-down page selection plug-in

A simple style and powerful selection jQuery plugin, including ajax remote data, autocomplete, pagination, tags, i18n, keyboard navigation functions

Simplified Chinese document

Docs, Demo, Guide

Explorer on

• English Official Site (Translation Unfinished)

• Chinese website

If you think the project is also good, please add a Star to the project to support the work of the author, Thank you

Plugin Preview

What

SelectPage is a jquery library multifunction drop list paging selector, as a powerful one form element, it will have a lot of shortcoming, welcome to submit your suggestions to the project,let’s make SelectPage better

Key Features

License

MIT

Why

How

Install

npm install selectpage
Copy the code

Usage

As you can see in the Demo Page, you will need to include:

<! -- SelectPage depend on font-awesome icon -->
<link rel="stylesheet" href="font-awesome.min.css" type="text/css">
<! --The jQuery library 1.6 +-->
<script type="text/javascript" src="jquery.min.js" >< /script>

<! -- include for Bootstrap2.x -->
<link rel="stylesheet" href="selectpage.css" type="text/css">
<! -- include for Bootstrap3.x -->
<link rel="stylesheet" href="selectpage.bootstrap3.css" type="text/css">
<! -- include for no css framework -->
<link rel="stylesheet" href="selectpage.base.css" type="text/css">
<! -- Above the css file under your css framework choose one of them to include -->

<script type="text/javascript" src="selectpage.js" >< /script>Copy the code

<input type="text" id="selectpage" >Copy the code

//Defined a array, the data returned at the server side is also used that format: array [{Object},{...}]
var data = [
    {id:1 ,name:'Chicago Bulls',desc:'Chicago Bulls'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'Cleveland Cavaliers'},
    {id:3 ,name:'Detroit Pistons',desc:'Detroit Pistons'},
    {id:4 ,name:'Indiana Pacers',desc:'Indiana Pacers'}];//init SelectPage
$('#selectpage').selectPage({
    showField : 'desc',
    keyField : 'id',
    data : data
});Copy the code

Options

• data string | object default : Undefined data source (String: ajax search URL | Object: JSON format array) example String: Serverside Request URL Address Object: JSON format Array, format like: [{a:1, B :2, C :3},{…}]

• lang string
  
  default : ‘cn’
  
  plugin language

• Multiple Boolean default: false whether it is multi-select mode (use tags mode)

• pagination boolean
  
  default : true
  
  paging or not

• listSize number
  
  default : 10
  
  the list shows the number of items, and the other items are displayed in a scroll bar,it only work on pagination : false

• multipleControlbar boolean
  
  default : true
  
  whether to enable the multi-select mode control button area,only work on multiple: true

• MaxSelectLimit Number Default: 0 maximum number of selections in multi-select mode, 0 is unlimited

• selectToCloseList boolean
  
  default : true
  
  is close list after item select,it only work on multiple:true

• initRecord string
  
  default : undefined
  
  the initial value of the plugin, The value will match the option.keyField field, and if it matches, it will be automatically selected and highlighted

• dbTable string
  
  default : ‘tbl’
  
  use this parameter to set the corresponding data table name in server side(ajax) mode

• keyField string
  
  default : ‘id’
  
  value field, usually the contents of the field will be automatically saved in the hidden domain

• showField string
  
  default : ‘name’
  
  the result is used to display the name of the attribute

• searchField string
  
  default : undefined
  
  query field, set server side query field when data source is server side mode, if not set default use of option.showField

• andOr string
  
  default : ‘AND’
  
  multiple keywords search type (‘AND’ or ‘OR’)

• orderBy array
  
  default : undefined
  
  result data sort type, default use showField specified field
  
  example
  
  orderBy : ['id desc']//use id field sort desc

• pageSize number
  
  default : 10
  
  the number of records per page

• params function default : undefined return : object send request params for server side data source(ajax) example params : function(){return {‘name’:’aa’,’sex’:1}; }

• formatItem function
  
  default : undefined
  
  param
  
  data object row data object format
  
  return : string
  
  list item display content formatting
  
  example

  formatItem : function(data) {return data.a + '(' + data.b + ')';
  }Copy the code

• focusDropList boolean
  
  default : true
  
  when input box get focus,drop the list

• autoSelectFirst boolean
  
  default : true
  
  whether to automatically select the first item in the list (enter the keyword query mode, use the mouse directly does not trigger)

• autoFillResult boolean
  
  default : true
  
  whether to automatically fill the content, if the list item is highlighted, in the focus away from the control, automatically set the item for the selected content

• noResultClean boolean
  
  default : true
  
  enter the keyword to query and no item match,when focus leave plugin,whether to clear enter keywords

• selectOnly boolean
  
  default : false
  
  select only mode,the input box can not enter any word

• InputDelay number default: 0.5(second) Enter the keyword query delay, work on server side(Ajax) mode

• eSelect function
  
  default : undefined
  
  param
  
  data object | array selected row or rows data(json)

• eAjaxSuccess function default : undefined in server side mode,this is the callback function when request success,the role of the callback is used to custom processing of the return data param data object server side return data(json) return object convert to SelectPage required data format return data format

  {
      list : [{name:'aa',sex:1},{name:'bb',sex:1}.],
      totalRow : 100
  }Copy the code

• eTagRemove function
  
  default : undefined
  
  this callback function is used to close tag, when multiple : true
  
  param
  
  removeCount number removed tag count

API