A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/TerryZ/SelectPage below:

TerryZ/SelectPage: A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features

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

Examples and Documentation

Explorer on

简体中文文档

The Vuejs version: v-selectpage

Multiple Selection with Tags form

Regular select mode ( single selection )

List only ( pagination bar close, disable typing to quick search, select only )

Download SelectPage plugin zip file by last release, or click me to download SelectPage

or use NPM

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

<!-- jQuery library -->
<script type="text/javascript" src="jquery.min.js" ></script>

<link rel="stylesheet" href="selectpage.css" type="text/css">
<script type="text/javascript" src="selectpage.js" ></script>

the SelectPage plugin just need put a input tag in the page

<input type="text" id="selectpage" >
// defined a array (the server side returned data format was same like that)
// Array[{Object},{...}]
var data = [
  {id: 1, name: 'Chicago Bulls', desc: '芝加哥公牛' },
  {id: 2, name: 'Cleveland Cavaliers', desc: '克里夫兰骑士' },
  {id: 3, name: 'Detroit Pistons', desc: '底特律活塞' },
  {id: 4, name: 'Indiana Pacers', desc: '印第安纳步行者' }
]
// init SelectPage
$('#selectpage').selectPage({
  showField : 'desc',
  keyField : 'id',
  data : data
})

The plugin initialize options

data source (string：ajax search URL | object：JSON format array)

// serverside request url address
$('#selectpage').selectPage({
  data: 'https://some-site/some-route'
})

// JSON format array
var data = [{a:1,b:2,c:3},{...}]
$('#selectpage').selectPage({
  data: data
})

plugin language

code language cn chinese en english de german es spanish ja japanse pt-br Brazilian Portuguese

whether it is multi-select mode（use tags mode）

paging or not

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

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

maximum number of selections in multi-select mode，0 is unlimited

is close list after item select,it only work on multiple:true

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

use this parameter to set the corresponding data table name in server side(ajax) mode

value field, usually the contents of the field will be automatically saved in the hidden domain

the result is used to display the name of the attribute

query field, set server side query field when data source is server side mode, if not set default use of option.showField

multiple keywords search type ('AND' or 'OR')

result data sort type, default use showField specified field

$('#selectpage').selectPage({
  ...
  orderBy : ['id desc'] // use id field sort desc
})

the number of records per page

send request params for server side data source(ajax)

$('#selectpage').selectPage({
  ...
  params : function() {
    return {
      name: 'aa',
      sex: 1
    }
  }
})

list item display content formatting

$('#selectpage').selectPage({
  ...
  formatItem : function(data) {
    return data.a + '(' + data.b + ')'
  }
})

when input box get focus,drop the list

whether to automatically select the first item in the list (enter the keyword query mode, use the mouse directly does not trigger)

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

enter the keyword to query and no item match,when focus leave plugin,whether to clear enter keywords

select only mode,the input box can not enter any word

enter the keyword query delay, work on server side(ajax) mode

item selected callback

$('#selectpage').selectPage({
  ...
  eSelect : function(data) {
    console.log(data)
  }
})

before show up result list callback

$('#selectpage').selectPage({
  ...
  eOpen : function(self) {
    console.log(self)
  }
})

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

server side return data for example

{
  "values": {
    "gridResult": {
      "pageSize": 10,
      "pageNumber": 1,
      "totalRow": 11,
      "totalPage": 2,
      "listData": [
        { "name": "name1", "id": "1" },
        { "name": "name2", "id": "2" },
        { ... }
      ]
    }
  }
}

eAjaxSuccess required data format

{
  list: object[],  // rows data
  totalRow: number // total record count number
}

then eAjaxSuccess code for example below

$('#selectpage').selectPage({
  ...
  data: 'https://some-site/some-route',
  eAjaxSuccess : function(data) {
    var dataNode = data.values.gridResult
    return {
      list : dataNode.listData,
      totalRow : dataNode.totalRow
    }
  }
})

this callback function is used to close tag, when multiple : true

$('#selectpage').selectPage({
  ...
  eTagRemove : function(tags) {
    console.log(tags)
  }
})

clear all select items

$('#selectpage').selectPageClear()

refresh plugin selected items info

$('#selectpage').val(20) // modify selected by id used javascript
$('#selectpage').selectPageRefresh() // refresh selection item info

change plugin data source,only work on json data source mode

var newdata = [
  { a: 1, b: 11, c: 111 },
  { a: 2, b: 22, c: 222 },
  { ... }
]
$('#selectpage').selectPageData(newdata)

get plugin disabled status or set plugin status to disabled / enabled

// get plugin disabled stuats
if($('#selectpage').selectPageDisabled()) {
  // set plugin to enabled
  $('#selectpage').selectPageDisabled(false)
}

get plugin selected items text

alert($('#selectpage').selectPageText())

get selected items raw data

console.log($('#selectpage').selectPageSelectedData())

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4