/**
 * @summary     SelectPage
 * @desc        Simple and powerful selection plugin
 * @file        selectpage.js
 * @version     2.19
 * @author      TerryZeng
 * @contact     https://terryz.github.io/
 * @license     MIT License
 *
 */
; (function ($) {
	"use strict"
	/**
	 * Default options
	 */
	var defaults = {
		/**
		 * Data source
		 * @type {string|Object}
		 *
		 * string：server side request url address
		 * Object：JSON array，format：[{a:1,b:2,c:3},{...}]
		 */
		data: undefined,
		/**
		 * Language ('cn', 'en', 'ja', 'es', 'pt-br')
		 * @type string
		 * @default 'cn'
		 */
		lang: 'cn',
		/**
		 * Multiple select mode(tags)
		 * @type boolean
		 * @default false
		 */
		multiple: false,
		/**
		 * pagination or not
		 * @type boolean
		 * @default true
		 */
		pagination: true,
		/**
		 * Show up menu button
		 * @type boolean
		 * @default true
		 */
		dropButton: true,
		/**
		 * Result list visible size in pagination bar close
		 * @type number
		 * @default 10
		 */
		listSize: 10,
		/**
		 * Show control bar in multiple select mode
		 * @type boolean
		 * @default true
		 */
		multipleControlbar: true,
		/**
		 * Max selected item limited in multiple select mode
		 * @type number
		 * @default 0(unlimited)
		 */
		maxSelectLimit: 0,
		/**
		 * Select result item to close list, work on multiple select mode
		 * @type boolean
		 * @default false
		 */
		selectToCloseList: false,
		/**
		 * Init selected item key, the result will match to option.keyField option
		 * @type string 
		 */
		initRecord: undefined,
		/**
		 * The table parameter in server side mode
		 * @type string
		 */
		dbTable: 'tbl',
		/**
		 * The value field, the value will fill to hidden element
		 * @type string
		 * @default 'id'
		 */
		keyField: 'id',
		/**
		 * The show text field, the text will show to input element or tags(multiple mode)
		 * @type string
		 * @default 'name'
		 */
		showField: 'name',
		thumbField: undefined,
		/**
		 * Actually used to search field
		 * @type string
		 */
		searchField: undefined,
		/**
		 * Search type ('AND' or 'OR')
		 * @type string
		 * @default 'AND'
		 */
		andOr: 'AND',
		/**
		 * Result sort type
		 * @type array|boolean
		 * @example
		 * orderBy : ['id desc']
		 */
		orderBy: false,
		/**
		 * Page size
		 * @type number
		 * @default 10
		 */
		pageSize: 10,
		/**
		 * Server side request parameters
		 * @type function
		 * @return object
		 * @example params : function(){return {'name':'aa','sex':1};}
		 */
		params: undefined,
		/**
		 * Custom result list item show text
		 * @type function
		 * @param data {object} row data
		 * @return string
		 */
		formatItem: undefined,
		/**
		 * Have some highlight item and lost focus, auto select the highlight item
		 * @type boolean
		 * @default false
		 */
		autoFillResult: false,
		/**
		 * Auto select first item in show up result list or search result
		 * depend on `autoFillResult` option set to true
		 * @type boolean
		 * @default false
		 */
		autoSelectFirst: false,
		/**
		 * Whether clear input element text when enter some keywords to search and no result return
		 * @type boolean
		 * @default true
		 */
		noResultClean: true,
		/**
		 * Select only mode
		 * @type boolean
		 */
		selectOnly: false,
		/**
		 * Input to search delay time, work on ajax data source
		 * @type number
		 * @default 0.5
		 */
		inputDelay: 0.5,
		/**
		 * -----------------------------------------Callback--------------------------------------------
		 */
		/**
		 * Result list item selected callback
		 * @type function
		 * @param object - selected item json data
		 * @param self   - plugin object
		 */
		eSelect: undefined,
		/**
		 * Before result list show up callback, you can do anything prepared
		 * @param self - plugin object
		 */
		eOpen: undefined,
		/**
		 * Server side return data convert callback
		 * @type function
		 * @param data {object} server side return data
		 * @param self {object} plugin object
		 * @return {object} return data format：
		 * @example 
		 * {
		 *   list : [{name:'aa',sex:1},{name:'bb',sex:1}...],
		 *   totalRow : 100
		 * }
		 */
		eAjaxSuccess: undefined,
		eAjaxMethod: undefined, // POST/GET
		defaultWidth: 150,
		defaultZindex: 1101,
		containerWidth: null,
		defaultAjaxResult: { "list": [], "pageSize": 10, "pageNumber": 1, "totalRow": 0, "totalPage": 0 },
		/**
		 * Close selected item tag callback (multiple mode)
		 * @type function
		 * @param removeCount {number} remove item count
		 * @param self {object} plugin object
		 */
		eTagRemove: undefined,
		/**
		 * Clear selected item callback(single select mode)
		 * @type function
		 * @param self {object} plugin object
		 */
		eClear: undefined
	}


	/**
	 * SelectPage class definition
	 * @constructor
	 * @param {Object} input - input element
	 * @param {Object} option
	 */
	var SelectPage = function (input, option) {
		this.setOption(option)
		this.setLanguage()
		this.setCssClass()
		this.setProp()
		this.setElem(input)

		this.setButtonAttrDefault()
		this.setInitRecord()

		this.eDropdownButton()
		this.eInput()
		this.eWhole()
	}
	/**
	 * Plugin version number
	 */
	SelectPage.version = '2.19'
	/**
	 * Plugin object cache key
	 */
	SelectPage.dataKey = 'selectPageObject'
	/**
	 * Options set
	 * @param {Object} option
	 */
	SelectPage.prototype.setOption = function (option) {
		//use showField to default
		option.searchField = option.searchField || option.showField

		option.andOr = option.andOr.toUpperCase()
		if (option.andOr !== 'AND' && option.andOr !== 'OR') option.andOr = 'AND'

		//support multiple field set
		var arr = ['searchField']
		for (var i = 0; i < arr.length; i++) {
			option[arr[i]] = this.strToArray(option[arr[i]])
		}

		//set multiple order field
		//example:  [ ['id ASC'], ['name DESC'] ]
		if (option.orderBy !== false) option.orderBy = this.setOrderbyOption(option.orderBy, option.showField)
		//close auto fill result and auto select first in multiple mode and select item not close list
		if (option.multiple && !option.selectToCloseList) {
			option.autoFillResult = false
			option.autoSelectFirst = false
		}
		//show all item when pagination bar close, limited 200
		if (!option.pagination) option.pageSize = 200
		if ($.type(option.listSize) !== 'number' || option.listSize < 0) option.listSize = 10

		this.option = option
	}

	/**
	 * String convert to array
	 * @param str {string}
	 * @return {Array}
	 */
	SelectPage.prototype.strToArray = function (str) {
		return str ? str.replace(/[\s　]+/g, '').split(',') : ''
	}

	/**
	 * Set order field
	 * @param {Array} arg_order
	 * @param {string} arg_field - default sort field
	 * @return {Array}
	 */
	SelectPage.prototype.setOrderbyOption = function (arg_order, arg_field) {
		var arr = [], orders = []
		if (typeof arg_order === 'object') {
			for (var i = 0; i < arg_order.length; i++) {
				orders = $.trim(arg_order[i]).split(' ')
				if (orders.length)
					arr.push((orders.length === 2) ? orders.concat() : [orders[0], 'ASC'])
			}
		} else {
			orders = $.trim(arg_order).split(' ')
			arr[0] = (orders.length === 2) ? orders.concat() : (orders[0].toUpperCase().match(/^(ASC|DESC)$/i)) ? [arg_field, orders[0].toUpperCase()] : [orders[0], 'ASC']
		}
		return arr
	}

	/**
	 * i18n
	 */
	SelectPage.prototype.setLanguage = function () {
		var message, p = this.option
		switch (p.lang) {
			// German
			case 'de':
				message = {
					add_btn: 'Hinzufügen-Button',
					add_title: 'Box hinzufügen',
					del_btn: 'Löschen-Button',
					del_title: 'Box löschen',
					next: 'Nächsten',
					next_title: 'Nächsten' + p.pageSize + ' (Pfeil-rechts)',
					prev: 'Vorherigen',
					prev_title: 'Vorherigen' + p.pageSize + ' (Pfeil-links)',
					first_title: 'Ersten (Umschalt + Pfeil-links)',
					last_title: 'Letzten (Umschalt + Pfeil-rechts)',
					get_all_btn: 'alle (Pfeil-runter)',
					get_all_alt: '(Button)',
					close_btn: 'Schließen (Tab)',
					close_alt: '(Button)',
					loading: 'lade...',
					loading_alt: '(lade)',
					page_info: 'page_num von page_count',
					select_ng: 'Achtung: Bitte wählen Sie aus der Liste aus.',
					select_ok: 'OK : Richtig ausgewählt.',
					not_found: 'nicht gefunden',
					ajax_error: 'Bei der Verbindung zum Server ist ein Fehler aufgetreten.',
					clear: 'Löschen Sie den Inhalt',
					select_all: 'Wähle diese Seite',
					unselect_all: 'Diese Seite entfernen',
					clear_all: 'Alles löschen',
					max_selected: 'Sie können nur bis zu max_selected_limit Elemente auswählen'
				}
				break

			// English
			case 'en':
				message = {
					add_btn: 'Add button',
					add_title: 'add a box',
					del_btn: 'Del button',
					del_title: 'delete a box',
					next: 'Next',
					next_title: 'Next' + p.pageSize + ' (Right key)',
					prev: 'Prev',
					prev_title: 'Prev' + p.pageSize + ' (Left key)',
					first_title: 'First (Shift + Left key)',
					last_title: 'Last (Shift + Right key)',
					get_all_btn: 'Get All (Down key)',
					get_all_alt: '(button)',
					close_btn: 'Close (Tab key)',
					close_alt: '(button)',
					loading: 'loading...',
					loading_alt: '(loading)',
					page_info: 'Page page_num of page_count',
					select_ng: 'Attention : Please choose from among the list.',
					select_ok: 'OK : Correctly selected.',
					not_found: 'not found',
					ajax_error: 'An error occurred while connecting to server.',
					clear: 'Clear content',
					select_all: 'Select current page',
					unselect_all: 'Clear current page',
					clear_all: 'Clear all selected',
					max_selected: 'You can only select up to max_selected_limit items'
				}
				break

			// Spanish
			case 'es':
				message = {
					add_btn: 'Agregar boton',
					add_title: 'Agregar una opcion',
					del_btn: 'Borrar boton',
					del_title: 'Borrar una opcion',
					next: 'Siguiente',
					next_title: 'Proximas ' + p.pageSize + ' (tecla derecha)',
					prev: 'Anterior',
					prev_title: 'Anteriores ' + p.pageSize + ' (tecla izquierda)',
					first_title: 'Primera (Shift + Left)',
					last_title: 'Ultima (Shift + Right)',
					get_all_btn: 'Ver todos (tecla abajo)',
					get_all_alt: '(boton)',
					close_btn: 'Cerrar (tecla TAB)',
					close_alt: '(boton)',
					loading: 'Cargando...',
					loading_alt: '(Cargando)',
					page_info: 'page_num de page_count',
					select_ng: 'Atencion: Elija una opcion de la lista.',
					select_ok: 'OK: Correctamente seleccionado.',
					not_found: 'no encuentre',
					ajax_error: 'Un error ocurrió mientras conectando al servidor.',
					clear: 'Borrar el contenido',
					select_all: 'Elija esta página',
					unselect_all: 'Borrar esta página',
					clear_all: 'Borrar todo marcado',
					max_selected: 'Solo puedes seleccionar hasta max_selected_limit elementos'
				}
				break

			// Brazilian Portuguese
			case 'pt-br':
				message = {
					add_btn: 'Adicionar botão',
					add_title: 'Adicionar uma caixa',
					del_btn: 'Apagar botão',
					del_title: 'Apagar uma caixa',
					next: 'Próxima',
					next_title: 'Próxima ' + p.pageSize + ' (tecla direita)',
					prev: 'Anterior',
					prev_title: 'Anterior ' + p.pageSize + ' (tecla esquerda)',
					first_title: 'Primeira (Shift + Left)',
					last_title: 'Última (Shift + Right)',
					get_all_btn: 'Ver todos (Seta para baixo)',
					get_all_alt: '(botão)',
					close_btn: 'Fechar (tecla TAB)',
					close_alt: '(botão)',
					loading: 'Carregando...',
					loading_alt: '(Carregando)',
					page_info: 'page_num de page_count',
					select_ng: 'Atenção: Escolha uma opção da lista.',
					select_ok: 'OK: Selecionado Corretamente.',
					not_found: 'não encontrado',
					ajax_error: 'Um erro aconteceu enquanto conectando a servidor.',
					clear: 'Limpe o conteúdo',
					select_all: 'Selecione a página atual',
					unselect_all: 'Remova a página atual',
					clear_all: 'Limpar tudo',
					max_selected: 'Você só pode selecionar até max_selected_limit itens'
				}
				break

			// Japanese
			case 'ja':
				message = {
					add_btn: '追加ボタン',
					add_title: '入力ボックスを追加します',
					del_btn: '削除ボタン',
					del_title: '入力ボックスを削除します',
					next: '次へ',
					next_title: '次の' + p.pageSize + '件 (右キー)',
					prev: '前へ',
					prev_title: '前の' + p.pageSize + '件 (左キー)',
					first_title: '最初のページへ (Shift + 左キー)',
					last_title: '最後のページへ (Shift + 右キー)',
					get_all_btn: '全件取得 (下キー)',
					get_all_alt: '画像:ボタン',
					close_btn: '閉じる (Tabキー)',
					close_alt: '画像:ボタン',
					loading: '読み込み中...',
					loading_alt: '画像:読み込み中...',
					page_info: 'page_num 件 (全 page_count 件)',
					select_ng: '注意 : リストの中から選択してください',
					select_ok: 'OK : 正しく選択されました。',
					not_found: '(0 件)',
					ajax_error: 'サーバとの通信でエラーが発生しました。',
					clear: 'コンテンツをクリアする',
					select_all: '当ページを選びます',
					unselect_all: '移して当ページを割ります',
					clear_all: '選択した項目をクリアする',
					max_selected: '最多で max_selected_limit のプロジェクトを選ぶことしかできません'
				}
				break
			// 中文
			case 'cn':
			default:
				message = {
					add_btn: '添加按钮',
					add_title: '添加区域',
					del_btn: '删除按钮',
					del_title: '删除区域',
					next: '下一页',
					next_title: '下' + p.pageSize + ' (→)',
					prev: '上一页',
					prev_title: '上' + p.pageSize + ' (←)',
					first_title: '首页 (Shift + ←)',
					last_title: '尾页 (Shift + →)',
					get_all_btn: '获得全部 (↓)',
					get_all_alt: '(按钮)',
					close_btn: '关闭 (Tab键)',
					close_alt: '(按钮)',
					loading: '读取中...',
					loading_alt: '(读取中)',
					page_info: '第 page_num 页(共page_count页)',
					select_ng: '请注意：请从列表中选择.',
					select_ok: 'OK : 已经选择.',
					not_found: '无查询结果',
					ajax_error: '连接到服务器时发生错误！',
					clear: '清除内容',
					select_all: '选择当前页项目',
					unselect_all: '取消选择当前页项目',
					clear_all: '清除全部已选择项目',
					max_selected: '最多只能选择 max_selected_limit 个项目'
				}
				break
		}
		this.message = message
	}

	/**
	 * Css classname defined
	 */
	SelectPage.prototype.setCssClass = function () {
		var css_class = {
			container: 'sp_container',
			container_open: 'sp_container_open',
			re_area: 'sp_result_area',
			result_open: 'sp_result_area_open',
			control_box: 'sp_control_box',
			//multiple select mode
			element_box: 'sp_element_box',
			navi: 'sp_navi',
			//result list
			results: 'sp_results',
			re_off: 'sp_results_off',
			select: 'sp_over',
			select_ok: 'sp_select_ok',
			select_ng: 'sp_select_ng',
			selected: 'sp_selected',
			input_off: 'sp_input_off',
			message_box: 'sp_message_box',
			disabled: 'sp_disabled',

			button: 'sp_button',
			caret_open: 'sp_caret_open',
			btn_on: 'sp_btn_on',
			btn_out: 'sp_btn_out',
			input: 'sp_input',
			clear_btn: 'sp_clear_btn',
			align_right: 'sp_align_right'
		}
		this.css_class = css_class
	}

	/**
	 * Plugin inner properties
	 */
	SelectPage.prototype.setProp = function () {
		this.prop = {
			//input disabled status
			disabled: false,
			current_page: 1,
			//total page
			max_page: 1,
			//ajax data loading status
			is_loading: false,
			xhr: false,
			key_paging: false,
			key_select: false,
			//last selected item value
			prev_value: '',
			//last selected item text
			selected_text: '',
			last_input_time: undefined,
			init_set: false
		}
		this.template = {
			tag: {
				content: '<li class="selected_tag" itemvalue="#item_value#">#item_text#<span class="tag_close"><i class="sp-iconfont if-close"></i></span></li>',
				textKey: '#item_text#',
				valueKey: '#item_value#'
			},
			page: {
				current: 'page_num',
				total: 'page_count'
			},
			msg: {
				maxSelectLimit: 'max_selected_limit'
			}
		}
	}

	/**
	 * Get the actual width/height of invisible DOM elements with jQuery.
	 * Source code come from dreamerslab/jquery.actual
	 * @param element
	 * @param method
	 * @returns {*}
	 */
	SelectPage.prototype.elementRealSize = function (element, method) {
		var defaults = {
			absolute: false,
			clone: false,
			includeMargin: false,
			display: 'block'
		}
		var configs = defaults, $target = element.eq(0), fix, restore, tmp = [], style = '', $hidden

		fix = function () {
			// get all hidden parents
			$hidden = $target.parents().addBack().filter(':hidden')
			style += 'visibility: hidden !important; display: ' + configs.display + ' !important; '

			if (configs.absolute === true) style += 'position: absolute !important;'

			// save the origin style props
			// set the hidden el css to be got the actual value later
			$hidden.each(function () {
				// Save original style. If no style was set, attr() returns undefined
				var $this = $(this), thisStyle = $this.attr('style')
				tmp.push(thisStyle)
				// Retain as much of the original style as possible, if there is one
				$this.attr('style', thisStyle ? thisStyle + ';' + style : style)
			})
		}

		restore = function () {
			// restore origin style values
			$hidden.each(function (i) {
				var $this = $(this), _tmp = tmp[i]

				if (_tmp === undefined) $this.removeAttr('style')
				else $this.attr('style', _tmp)
			})
		}

		fix()
		// get the actual value with user specific methed
		// it can be 'width', 'height', 'outerWidth', 'innerWidth'... etc
		// configs.includeMargin only works for 'outerWidth' and 'outerHeight'
		var actual = /(outer)/.test(method) ?
			$target[method](configs.includeMargin) :
			$target[method]()

		restore()
		// IMPORTANT, this plugin only return the value of the first element
		return actual
	}

	/**
	 * Dom building
	 * @param {Object} combo_input - original input element
	 */
	SelectPage.prototype.setElem = function (combo_input) {
		// 1. build Dom object
		var elem = {}, p = this.option, css = this.css_class, msg = this.message, input = $(combo_input)
		var orgWidth = input.outerWidth()
		// fix input width in hidden situation
		if (orgWidth <= 0) orgWidth = this.elementRealSize(input, 'outerWidth')
		if (orgWidth < 150) orgWidth = p.defaultWidth || 150

		elem.combo_input = input.attr({ 'autocomplete': 'off' }).addClass(css.input).wrap('<div>')
		if (p.selectOnly) elem.combo_input.prop('readonly', true)
		elem.container = elem.combo_input.parent().addClass(css.container)
		if (elem.combo_input.prop('disabled')) {
			if (p.multiple) elem.container.addClass(css.disabled)
			else elem.combo_input.addClass(css.input_off)
		}

		// set outer box width
		if (!p.containerWidth) {
			elem.container.width(orgWidth)
		} else {
			elem.container.css('width', p.containerWidth)
		}

		elem.button = $('<div>').addClass(css.button)
		//drop down button
		elem.dropdown = $('<span class="sp_caret"></span>')
		//clear button 'X' in single mode
		elem.clear_btn = $('<div>').html($('<i>').addClass('sp-iconfont if-close')).addClass(css.clear_btn).attr('title', msg.clear)
		if (!p.dropButton) elem.clear_btn.addClass(css.align_right)

		//main box in multiple mode
		elem.element_box = $('<ul>').addClass(css.element_box)
		if (p.multiple && p.multipleControlbar)
			elem.control = $('<div>').addClass(css.control_box)
		//result list box
		elem.result_area = $('<div>').addClass(css.re_area)
		//pagination bar
		if (p.pagination) elem.navi = $('<div>').addClass('sp_pagination').append('<ul>')
		elem.results = $('<ul>').addClass(css.results)

		var namePrefix = '_text',
			input_id = elem.combo_input.attr('id') || elem.combo_input.attr('name'),
			input_name = elem.combo_input.attr('name') || 'selectPage',
			hidden_name = input_name,
			hidden_id = input_id

		//switch the id and name attributes of input/hidden element
		elem.hidden = $('<input type="hidden" class="sp_hidden" />').attr({
			name: hidden_name,
			id: hidden_id
		}).val('')
		elem.combo_input.attr({
			name: input_name + namePrefix,
			id: input_id + namePrefix
		})

		// 2. DOM element put
		elem.container.append(elem.hidden)
		if (p.dropButton) {
			elem.container.append(elem.button)
			elem.button.append(elem.dropdown)
		}
		$(document.body).append(elem.result_area)
		elem.result_area.append(elem.results)
		if (p.pagination) elem.result_area.append(elem.navi)

		//Multiple select mode
		if (p.multiple) {
			if (p.multipleControlbar) {
				elem.control.append('<button type="button" class="btn btn-default sp_clear_all" ><i class="sp-iconfont if-clear"></i></button>')
				elem.control.append('<button type="button" class="btn btn-default sp_unselect_all" ><i class="sp-iconfont if-unselect-all"></i></button>')
				elem.control.append('<button type="button" class="btn btn-default sp_select_all" ><i class="sp-iconfont if-select-all"></i></button>')
				elem.control_text = $('<p>')
				elem.control.append(elem.control_text)
				elem.result_area.prepend(elem.control)
			}
			elem.container.addClass('sp_container_combo')
			elem.combo_input.addClass('sp_combo_input').before(elem.element_box)
			var li = $('<li>').addClass('input_box')
			li.append(elem.combo_input)
			elem.element_box.append(li)
			if (elem.combo_input.attr('placeholder')) elem.combo_input.attr('placeholder_bak', elem.combo_input.attr('placeholder'))
		}

		this.elem = elem
	}

	/**
	 * Drop down button set to default
	 */
	SelectPage.prototype.setButtonAttrDefault = function () {
		/*
		if (this.option.selectOnly) {
			if ($(this.elem.combo_input).val() !== '') {
				if ($(this.elem.hidden).val() !== '') {
					//选择条件
					$(this.elem.combo_input).attr('title', this.message.select_ok).removeClass(this.css_class.select_ng).addClass(this.css_class.select_ok)
				} else {
					//输入方式
					$(this.elem.combo_input).attr('title', this.message.select_ng).removeClass(this.css_class.select_ok).addClass(this.css_class.select_ng)
				}
			} else {
				$(this.elem.hidden).val('')
				$(this.elem.combo_input).removeAttr('title').removeClass(this.css_class.select_ng)
			}
		}
		*/
		//this.elem.button.attr('title', this.message.get_all_btn)
		if (this.option.dropButton)
			this.elem.button.attr('title', this.message.close_btn)
	}

	/**
	 * Set item need selected after init
	 * set selected item ways:
	 * <input value="key">
	 * <input data-init="key">
	 */
	SelectPage.prototype.setInitRecord = function (refresh) {
		var self = this, p = self.option, el = self.elem, key = ''
		if ($.type(el.combo_input.data('init')) != 'undefined')
			p.initRecord = String(el.combo_input.data('init'))
		//data-init and value attribute can be init plugin selected item
		//but, if set data-init and value attribute in the same time, plugin will choose data-init attribute first
		if (!refresh && !p.initRecord && el.combo_input.val())
			p.initRecord = el.combo_input.val()
		el.combo_input.val('')
		if (!refresh) el.hidden.val(p.initRecord)
		key = refresh && el.hidden.val() ? el.hidden.val() : p.initRecord
		if (key) {
			if (typeof p.data === 'object') {
				var data = new Array()
				var keyarr = key.split(',')
				$.each(keyarr, function (index, row) {
					for (var i = 0; i < p.data.length; i++) {
						if (p.data[i][p.keyField] == row) {
							data.push(p.data[i])
							break
						}
					}
				})
				if (!p.multiple && data.length > 1) data = [data[0]]
				self.afterInit(self, data)
			} else {//ajax data source mode to init selected item
				var _paramsFunc = p.params, _params = {}
				var _orgParams = {
					searchTable: p.dbTable,
					searchKey: p.keyField,
					searchValue: key
				}
				if (_paramsFunc && $.isFunction(_paramsFunc)) {
					var result = _paramsFunc.call(self)
					if (result && $.isPlainObject(result)) {
						_params = $.extend({}, _orgParams, result)
					} else _params = _orgParams
				} else _params = _orgParams
				$.ajax({
					dataType: 'json',
					type: p.eAjaxMethod || 'POST',
					url: p.data,
					data: _params,
					success: function (json) {
						var d = null
						if (p.eAjaxSuccess && $.isFunction(p.eAjaxSuccess)) {
							d = p.eAjaxSuccess(json)
						}
						if (!d) d = p.defaultAjaxResult
						self.afterInit(self, d.list)
					},
					error: function (jqXHR, textStatus, errorThrown) {
						self.ajaxErrorNotify(self, errorThrown)
					}
				})
			}
		}
	}

	/**
	 * Selected item set to plugin
	 * @param {Object} self
	 * @param {Object} data - selected item data
	 */
	SelectPage.prototype.afterInit = function (self, data) {
		if (!data || ($.isArray(data) && data.length === 0)) return
		if (!$.isArray(data)) data = [data]
		var p = self.option, css = self.css_class
		var getText = function (row) {
			var text = row[p.showField]
			return text
		}
		if (p.multiple) {
			self.prop.init_set = true
			self.clearAll(self)
			$.each(data, function (i, row) {
				var item = { text: getText(row), value: row[p.keyField] }
				if (!self.isAlreadySelected(self, item)) self.addNewTag(self, row, item)
			})
			self.tagValuesSet(self)
			self.inputResize(self)
			self.prop.init_set = false
		} else {
			var row = data[0]
			var rowText = getText(row)
			self.elem.combo_input.val(rowText)
			self.elem.hidden.val(row[p.keyField])
			self.prop.prev_value = rowText
			self.prop.selected_text = rowText
			if (p.selectOnly) {
				self.elem.combo_input.attr('title', self.message.select_ok).removeClass(css.select_ng).addClass(css.select_ok)
			}
			self.putClearButton()
		}
	}

	/**
	 * Drop down button event bind
	 */
	SelectPage.prototype.eDropdownButton = function () {
		var self = this
		if (self.option.dropButton) {
			self.elem.button.mouseup(function (ev) {
				ev.stopPropagation()
				if (self.elem.result_area.is(':hidden') && !self.elem.combo_input.prop('disabled')) {
					self.elem.combo_input.focus()
				} else self.hideResults(self)
			})
		}
	}

	/**
	 * Events bind
	 */
	SelectPage.prototype.eInput = function () {
		var self = this, p = self.option, el = self.elem, msg = self.message
		var showList = function () {
			self.prop.page_move = false
			self.suggest(self)
			self.setCssFocusedInput(self)
		}
		var compositionStart = false;
		el.combo_input.on('compositionstart', function(e) {
			compositionStart = true
		});
		el.combo_input.on('compositionend', function(e) {
			compositionStart = false
			self.processKey(self, e)
		});
		el.combo_input.on('paste', function (e) {
			self.processKey(self, e)
		});
		el.combo_input.keyup(function (e) {
			if(!compositionStart) self.processKey(self, e)
		}).keydown(function (e) {
			if(!compositionStart) self.processControl(self, e)
		}).focus(function (e) {
			//When focus on input, show the result list
			if (el.result_area.is(':hidden')) {
				e.stopPropagation()
				self.prop.first_show = true
				showList()
			}
		})
		el.container.on('click.SelectPage', 'div.' + self.css_class.clear_btn, function (e) {
			e.stopPropagation()
			if (!self.disabled(self)) {
				self.clearAll(self, true)
				if (p.eClear && $.isFunction(p.eClear)) p.eClear(self)
				self.elem.combo_input.trigger('input')
			}
		})
		el.result_area.on('mousedown.SelectPage', function (e) {
			e.stopPropagation()
		})
		if (p.multiple) {
			if (p.multipleControlbar) {
				//Select all item of current page
				el.control.find('.sp_select_all').on('click.SelectPage', function (e) {
					self.selectAllLine(self)
				}).hover(function () {
					el.control_text.html(msg.select_all)
				}, function () {
					el.control_text.html('')
				})
				//Cancel select all item of current page
				el.control.find('.sp_unselect_all').on('click.SelectPage', function (e) {
					self.unSelectAllLine(self)
				}).hover(function () {
					el.control_text.html(msg.unselect_all)
				}, function () {
					el.control_text.html('')
				})
				//Clear all selected item
				el.control.find('.sp_clear_all').on('click.SelectPage', function (e) {
					self.clearAll(self, true)
				}).hover(function () {
					el.control_text.html(msg.clear_all)
				}, function () {
					el.control_text.html('')
				})
			}
			el.element_box.on('click.SelectPage', function (e) {
				var srcEl = e.target || e.srcElement
				if ($(srcEl).is('ul')) el.combo_input.focus()
			})
			//Tag close
			el.element_box.on('click.SelectPage', 'span.tag_close', function () {
				var li = $(this).closest('li'), data = li.data('dataObj')
				self.removeTag(self, li)
				showList()
				if (p.eTagRemove && $.isFunction(p.eTagRemove)) p.eTagRemove([data])
			})
			self.inputResize(self)
		}
	}

	/**
	 * Out of plugin area click event handler
	 */
	SelectPage.prototype.eWhole = function () {
		var self = this, css = self.css_class
		var cleanContent = function (obj) {
			obj.elem.combo_input.val('')
			if (!obj.option.multiple) obj.elem.hidden.val('')
			obj.prop.selected_text = ''
		}

		//Out of plugin area
		$(document.body).off('mousedown.selectPage').on('mousedown.selectPage', function (e) {
			var ele = e.target || e.srcElement
			var sp = $(ele).closest('div.' + css.container)
			//Open status result list
			$('div.' + css.container + '.' + css.container_open).each(function () {
				if (this == sp[0]) return
				var $this = $(this), d = $this.find('input.' + css.input).data(SelectPage.dataKey)

				if (!d.elem.combo_input.val() && d.elem.hidden.val() && !d.option.multiple) {
					d.prop.current_page = 1;//reset page to 1
					cleanContent(d)
					d.hideResults(d)
					return true
				}
				if (d.elem.results.find('li').not('.' + css.message_box).length) {
					if (d.option.autoFillResult) {
						//have selected item, then hide result list
						if (d.elem.hidden.val()) d.hideResults(d)
						else if (d.elem.results.find('li.sp_over').length) {
							//no one selected and have highlight item, select the highlight item
							d.selectCurrentLine(d, true)
						} else if (d.option.autoSelectFirst) {
							//no one selected, no one highlight, select the first item
							d.nextLine(d)
							d.selectCurrentLine(d, true)
						} else d.hideResults(d)
					} else d.hideResults(d)
				} else {
					//when no one item match, clear search keywords
					if (d.option.noResultClean) cleanContent(d)
					else {
						if (!d.option.multiple) d.elem.hidden.val('')
					}
					d.hideResults(d)
				}
			})
		})
	}

	/**
	 * Result list event bind
	 */
	SelectPage.prototype.eResultList = function () {
		var self = this, css = this.css_class
		self.elem.results.children('li').hover(function () {
			if (self.prop.key_select) {
				self.prop.key_select = false
				return
			}
			if (!$(this).hasClass(css.selected) && !$(this).hasClass(css.message_box)) {
				$(this).addClass(css.select)
				self.setCssFocusedResults(self)
			}
		}, function () {
			$(this).removeClass(css.select)
		}).click(function (e) {
			if (self.prop.key_select) {
				self.prop.key_select = false
				return
			}
			e.preventDefault()
			e.stopPropagation()

			if (!$(this).hasClass(css.selected)) self.selectCurrentLine(self, false)
		})
	}

	/**
	 * Reposition result list when list beyond the visible area
	 */
	SelectPage.prototype.eScroll = function () {
		var self = this, css = this.css_class
		$(window).on('scroll.SelectPage', function (e) {
			$('div.' + css.container + '.' + css.container_open).each(function () {
				var $this = $(this), d = $this.find('input.' + css.input).data(SelectPage.dataKey),
					offset = d.elem.result_area.offset(),
					screenScrollTop = $(window).scrollTop(),
					docHeight = $(document).height(),
					viewHeight = $(window).height(),
					listHeight = d.elem.result_area.outerHeight(),
					listBottom = offset.top + listHeight,
					hasOverflow = docHeight > viewHeight,
					down = d.elem.result_area.hasClass('shadowDown')
				if (hasOverflow) {
					if (down) {//open down
						if (listBottom > (viewHeight + screenScrollTop)) d.calcResultsSize(d)
					} else {//open up
						if (offset.top < screenScrollTop) d.calcResultsSize(d)
					}
				}
			})
		})
	}

	/**
	 * Page bar button event bind
	 */
	SelectPage.prototype.ePaging = function () {
		var self = this
		if (!self.option.pagination) return
		self.elem.navi.find('li.csFirstPage').off('click').on('click', function (ev) {
			//$(self.elem.combo_input).focus()
			ev.preventDefault()
			self.firstPage(self)
		})

		self.elem.navi.find('li.csPreviousPage').off('click').on('click', function (ev) {
			//$(self.elem.combo_input).focus()
			ev.preventDefault()
			self.prevPage(self)
		})

		self.elem.navi.find('li.csNextPage').off('click').on('click', function (ev) {
			//$(self.elem.combo_input).focus()
			ev.preventDefault()
			self.nextPage(self)
		})

		self.elem.navi.find('li.csLastPage').off('click').on('click', function (ev) {
			//$(self.elem.combo_input).focus()
			ev.preventDefault()
			self.lastPage(self)
		})
	}

	/**
	 * Ajax request fail
	 * @param {Object} self
	 * @param {string} errorThrown
	 */
	SelectPage.prototype.ajaxErrorNotify = function (self, errorThrown) {
		self.showMessage(self.message.ajax_error)
	}

	/**
	 * Message box
	 * @param {Object} self
	 * @param msg {string} the text need to show
	 */
	SelectPage.prototype.showMessage = function (self, msg) {
		if (!msg) return
		var msgLi = '<li class="' + self.css_class.message_box + '"><i class="sp-iconfont if-warning"></i> ' + msg + '</li>'
		self.elem.results.empty().append(msgLi).show()
		self.calcResultsSize(self)
		self.setOpenStatus(self, true)
		self.elem.control.hide()
		if (self.option.pagination) self.elem.navi.hide()
	}

	/**
	 * @desc Scroll
	 * @param {Object} self
	 * @param {boolean} enforce
	 */
	SelectPage.prototype.scrollWindow = function (self, enforce) {
		var current_result = self.getCurrentLine(self),
			target_top = (current_result && !enforce) ? current_result.offset().top : self.elem.container.offset().top,
			target_size

		self.prop.size_li = self.elem.results.children('li:first').outerHeight()
		target_size = self.prop.size_li

		var gap, client_height = $(window).height(),
			scroll_top = $(window).scrollTop(),
			scroll_bottom = scroll_top + client_height - target_size
		if (current_result.length) {
			if (target_top < scroll_top || target_size > client_height) {
				//scroll to top
				gap = target_top - scroll_top
			} else if (target_top > scroll_bottom) {
				//scroll down
				gap = target_top - scroll_bottom
			} else return; //do not scroll
		} else if (target_top < scroll_top) gap = target_top - scroll_top
		window.scrollBy(0, gap)
	}
	/**
	 * change css class by status
	 * @param self
	 * @param status {boolean} true: open, false: close
	 */
	SelectPage.prototype.setOpenStatus = function (self, status) {
		var el = self.elem, css = self.css_class
		if (status) {
			el.container.addClass(css.container_open)
			el.result_area.addClass(css.result_open)
		} else {
			el.container.removeClass(css.container_open)
			el.result_area.removeClass(css.result_open)
		}
	}

	/**
	 * input element in focus css class set
	 * @param {Object} self
	 */
	SelectPage.prototype.setCssFocusedInput = function (self) {
		//$(self.elem.results).addClass(self.css_class.re_off)
		//$(self.elem.combo_input).removeClass(self.css_class.input_off)
	}

	/**
	 * set result list get focus and input element lost focus
	 * @param {Object} self
	 */
	SelectPage.prototype.setCssFocusedResults = function (self) {
		//$(self.elem.results).removeClass(self.css_class.re_off)
		//$(self.elem.combo_input).addClass(self.css_class.input_off)
	}

	/**
	 * Quick search input keywords listener
	 * @param {Object} self
	 */
	SelectPage.prototype.checkValue = function (self) {
		var now_value = self.elem.combo_input.val()
		if (now_value != self.prop.prev_value) {
			self.prop.prev_value = now_value
			self.prop.first_show = false

			if (self.option.selectOnly) self.setButtonAttrDefault()
			if (!self.option.multiple && !now_value) {
				self.elem.combo_input.val('')
				self.elem.hidden.val('')
				self.elem.clear_btn.remove()
			}

			self.suggest(self)
		}
	}

	/**
	 * Input handle（regular input）
	 * @param {Object} self
	 * @param {Object} e - event object
	 */
	SelectPage.prototype.processKey = function (self, e) {
		if ($.inArray(e.keyCode, [37, 38, 39, 40, 27, 9, 13]) === -1) {
			if (e.keyCode != 16) self.setCssFocusedInput(self); // except Shift(16)
			self.inputResize(self)
			if ($.type(self.option.data) === 'string') {
				self.prop.last_input_time = e.timeStamp
				setTimeout(function () {
					if ((e.timeStamp - self.prop.last_input_time) === 0)
						self.checkValue(self)
				}, self.option.inputDelay * 1000)
			} else {
				self.checkValue(self)
			}
		}
	}

	/**
	 * Input handle（control key）
	 * @param {Object} self
	 * @param {Object} e - event object
	 */
	SelectPage.prototype.processControl = function (self, e) {
		if (($.inArray(e.keyCode, [37, 38, 39, 40, 27, 9]) > -1 && self.elem.result_area.is(':visible')) ||
			($.inArray(e.keyCode, [13, 9]) > -1 && self.getCurrentLine(self))) {
			e.preventDefault()
			e.stopPropagation()
			e.cancelBubble = true
			e.returnValue = false
			switch (e.keyCode) {
				case 37:// left
					if (e.shiftKey) self.firstPage(self)
					else self.prevPage(self)
					break
				case 38:// up
					self.prop.key_select = true
					self.prevLine(self)
					break
				case 39:// right
					if (e.shiftKey) self.lastPage(self)
					else self.nextPage(self)
					break
				case 40:// down
					if (self.elem.results.children('li').length) {
						self.prop.key_select = true
						self.nextLine(self)
					} else self.suggest(self)
					break
				case 9:// tab
					self.prop.key_paging = true
					self.selectCurrentLine(self, true)
					//self.hideResults(self)
					break
				case 13:// return
					self.selectCurrentLine(self, true)
					break
				case 27://  escape
					self.prop.key_paging = true
					self.hideResults(self)
					break
			}
		}
	}

	/**
	 * Abort Ajax request
	 * @param {Object} self
	 */
	SelectPage.prototype.abortAjax = function (self) {
		if (self.prop.xhr) {
			self.prop.xhr.abort()
			self.prop.xhr = false
		}
	}

	/**
	 * Suggest result of search keywords
	 * @param {Object} self
	 */
	SelectPage.prototype.suggest = function (self) {
		var q_word, val = $.trim(self.elem.combo_input.val())
		if (self.option.multiple) q_word = val
		else {
			if (val && val === self.prop.selected_text) q_word = ''
			else q_word = val
		}
		q_word = q_word.split(/[\s　]+/)

		//Before show up result list callback
		if (self.option.eOpen && $.isFunction(self.option.eOpen))
			self.option.eOpen.call(self)

		self.abortAjax(self)
		//self.setLoading(self)
		var which_page_num = self.prop.current_page || 1

		if (typeof self.option.data == 'object') self.searchForJson(self, q_word, which_page_num)
		else self.searchForDb(self, q_word, which_page_num)
	}

	/**
	 * Loading
	 * @param {Object} self
	 */
	SelectPage.prototype.setLoading = function (self) {
		if (self.elem.results.html() === '') {
			//self.calcResultsSize(self)
			self.setOpenStatus(self, true)
		}
	}

	/**
	 * Search for ajax
	 * @param {Object} self
	 * @param {Array} q_word - query keyword
	 * @param {number} which_page_num - target page number
	 */
	SelectPage.prototype.searchForDb = function (self, q_word, which_page_num) {
		var p = self.option
		if (!p.eAjaxSuccess || !$.isFunction(p.eAjaxSuccess)) self.hideResults(self)
		var _paramsFunc = p.params, _params = {}, searchKey = p.searchField
		//when have new query keyword, then reset page number to 1.
		if (q_word.length && q_word[0] && q_word[0] !== self.prop.prev_value) which_page_num = 1
		var _orgParams = {
			q_word: q_word,
			pageNumber: which_page_num,
			pageSize: p.pageSize,
			andOr: p.andOr,
			searchTable: p.dbTable
		}
		if (p.orderBy !== false) _orgParams.orderBy = p.orderBy
		_orgParams[searchKey] = q_word[0]
		if (_paramsFunc && $.isFunction(_paramsFunc)) {
			var result = _paramsFunc.call(self)
			if (result && $.isPlainObject(result)) {
				_params = $.extend({}, _orgParams, result)
			} else _params = _orgParams
		} else _params = _orgParams
		self.prop.xhr = $.ajax({
			dataType: 'json',
			url: p.data,
			type: p.eAjaxMethod || 'POST',
			data: _params,
			success: function (returnData) {
				if (!returnData || !$.isPlainObject(returnData)) {
					self.hideResults(self)
					self.ajaxErrorNotify(self, errorThrown)
					return
				}
				var data = {}, json = {}
				try {
					data = p.eAjaxSuccess(returnData)
					if (!data) data = p.defaultAjaxResult
					json.originalResult = data.list
					json.cnt_whole = data.totalRow
				} catch (e) {
					self.showMessage(self, self.message.ajax_error)
					return
				}

				json.candidate = []
				json.keyField = []
				if (typeof json.originalResult != 'object') {
					self.prop.xhr = null
					self.notFoundSearch(self)
					return
				}
				json.cnt_page = json.originalResult.length
				for (var i = 0; i < json.cnt_page; i++) {
					if(json.originalResult[i] === undefined) break;
					if(p.keyField in json.originalResult[i]){
						json.keyField.push(json.originalResult[i][p.keyField])
					}
					if (p.showField in json.originalResult[i]){
						json.candidate.push({
							text:json.originalResult[i][p.showField],
							thumb:(p.thumbField && p.thumbField in json.originalResult[i])?json.originalResult[i][p.thumbField]:''
						})
					}
				}
				self.prepareResults(self, json, q_word, which_page_num)
			},
			error: function (jqXHR, textStatus, errorThrown) {
				if (textStatus != 'abort') {
					self.hideResults(self)
					self.ajaxErrorNotify(self, errorThrown)
				}
			},
			complete: function () {
				self.prop.xhr = null
			}
		})
	}

	/**
	 * Search for json data source
	 * @param {Object} self
	 * @param {Array} q_word
	 * @param {number} which_page_num
	 */
	SelectPage.prototype.searchForJson = function (self, q_word, which_page_num) {
		var p = self.option, matched = [], esc_q = [], sorted = [], json = {}, i = 0, arr_reg = []

		//query keyword filter
		do {
			//'/\W/g'正则代表全部不是字母，数字，下划线，汉字的字符
			//将非法字符进行转义
			esc_q[i] = q_word[i].replace(/\W/g, '\\$&').toString()
			arr_reg[i] = new RegExp(esc_q[i], 'gi')
			i++
		} while (i < q_word.length)

		// SELECT * FROM data WHERE field LIKE q_word
		for (var i = 0; i < p.data.length; i++) {
			var flag = false, row = p.data[i], itemText
			for (var j = 0; j < arr_reg.length; j++) {
				itemText = row[p.searchField]
				//if(p.formatItem && $.isFunction(p.formatItem)) itemText = p.formatItem(row)
				if (itemText.match(arr_reg[j])) {
					flag = true
					if (p.andOr == 'OR') break
				} else {
					flag = false
					if (p.andOr == 'AND') break
				}
			}
			if (flag) matched.push(row)
		}

		// (CASE WHEN ...) then く order some column
		if (p.orderBy === false) sorted = matched.concat()
		else {
			var reg1 = new RegExp('^' + esc_q[0] + '$', 'gi'),
				reg2 = new RegExp('^' + esc_q[0], 'gi'),
				matched1 = [], matched2 = [], matched3 = []
			for (var i = 0; i < matched.length; i++) {
				var orderField = p.orderBy[0][0]
				var orderValue = String(matched[i][orderField])
				if (orderValue.match(reg1)) {
					matched1.push(matched[i])
				} else if (orderValue.match(reg2)) {
					matched2.push(matched[i])
				} else {
					matched3.push(matched[i])
				}
			}

			if (p.orderBy[0][1].match(/^asc$/i)) {
				matched1 = self.sortAsc(self, matched1)
				matched2 = self.sortAsc(self, matched2)
				matched3 = self.sortAsc(self, matched3)
			} else {
				matched1 = self.sortDesc(self, matched1)
				matched2 = self.sortDesc(self, matched2)
				matched3 = self.sortDesc(self, matched3)
			}
			sorted = sorted.concat(matched1).concat(matched2).concat(matched3)
		}

		/*
		if (sorted.length === undefined || sorted.length === 0 ) {
			self.notFoundSearch(self)
			return
		}
		*/
		json.cnt_whole = sorted.length
		//page_move used to distinguish between init plugin or page moving
		if (!self.prop.page_move) {
			//only single mode can be used page number relocation
			if (!p.multiple) {
				//get selected item belong page number
				var currentValue = self.elem.hidden.val()
				if ($.type(currentValue) !== 'undefined' && $.trim(currentValue) !== '') {
					var index = 0
					$.each(sorted, function (i, row) {
						if (row[p.keyField] == currentValue) {
							index = i + 1
							return false
						}
					})
					which_page_num = Math.ceil(index / p.pageSize)
					if (which_page_num < 1) which_page_num = 1
					self.prop.current_page = which_page_num
				}
			}
		} else {
			//set page number to 1 when result number less then page size
			if (sorted.length <= ((which_page_num - 1) * p.pageSize)) {
				which_page_num = 1
				self.prop.current_page = 1
			}
		}

		//LIMIT xx OFFSET xx
		var start = (which_page_num - 1) * p.pageSize, end = start + p.pageSize
		//save original data
		json.originalResult = []
		//after data filter handle
		for (var i = start; i < end; i++) {
			if (sorted[i] === undefined) break
			json.originalResult.push(sorted[i])
			if(p.keyField in sorted[i]){
				if (json.keyField === undefined) json.keyField = []
				json.keyField.push(sorted[i][p.keyField])
			}
			if(p.showField in sorted[i]){
				if (json.candidate === undefined) json.candidate = []
				json.candidate.push({
					text:sorted[i][p.showField],
					thumb: (p.thumbField && p.thumbField in sorted[i])?sorted[i][p.thumbField]:''
				})
			}
		}

		if (json.candidate === undefined) json.candidate = []
		json.cnt_page = json.candidate.length
		self.prepareResults(self, json, q_word, which_page_num)
	}

	/**
	 * Set order asc
	 * @param {Object} self
	 * @param {Array} arr - result array
	 */
	SelectPage.prototype.sortAsc = function (self, arr) {
		arr.sort(function (a, b) {
			var valA = a[self.option.orderBy[0][0]], valB = b[self.option.orderBy[0][0]]
			return $.type(valA) === 'number' ? valA - valB : String(valA).localeCompare(String(valB))
		})
		return arr
	}

	/**
	 * Set order desc
	 * @param {Object} self
	 * @param {Array} arr - result array
	 */
	SelectPage.prototype.sortDesc = function (self, arr) {
		arr.sort(function (a, b) {
			var valA = a[self.option.orderBy[0][0]], valB = b[self.option.orderBy[0][0]]
			return $.type(valA) === 'number' ? valB - valA : String(valB).localeCompare(String(valA))
		})
		return arr
	}

	/**
	 * Not result found handle
	 * @param {Object} self
	 */
	SelectPage.prototype.notFoundSearch = function (self) {
		self.elem.results.empty()
		self.calcResultsSize(self)
		self.setOpenStatus(self, true)
		self.setCssFocusedInput(self)
	}

	/**
	 * Prepare data to show
	 * @param {Object} self
	 * @param {Object} json - data result
	 * @param {Array} q_word - query keyword
	 * @param {number} which_page_num - target page number
	 */
	SelectPage.prototype.prepareResults = function (self, json, q_word, which_page_num) {
		if (self.option.pagination) self.setNavi(self, json.cnt_whole, json.cnt_page, which_page_num)

		if (!json.keyField) json.keyField = false

		if (self.option.selectOnly && json.candidate.length === 1 && json.candidate[0].text == q_word[0]) {
			self.elem.hidden.val(json.keyField[0])
			this.setButtonAttrDefault()
		}
		var is_query = false
		if (q_word && q_word.length && q_word[0]) is_query = true
		self.displayResults(self, json, is_query)
	}

	/**
	 * Build page bar
	 * @param {Object} self
	 * @param {number} cnt_whole - total record count
	 * @param {number} cnt_page
	 * @param {number} page_num - current page number
	 */
	SelectPage.prototype.setNavi = function (self, cnt_whole, cnt_page, page_num) {
		var msg = self.message
		/**
		 * build pagination bar
		 */
		var buildPageNav = function (self, pagebar, page_num, last_page) {
			var updatePageInfo = function () {
				var pageInfo = msg.page_info
				return pageInfo.replace(self.template.page.current, page_num).replace(self.template.page.total, last_page)
			}
			if (pagebar.find('li').length === 0) {
				pagebar.hide().empty()
				var iconFist = 'sp-iconfont if-first',
					iconPrev = 'sp-iconfont if-previous',
					iconNext = 'sp-iconfont if-next',
					iconLast = 'sp-iconfont if-last'

				pagebar.append('<li class="csFirstPage" title="' + msg.first_title + '" ><a href="javascript:void(0);"> <i class="' + iconFist + '"></i> </a></li>')
				pagebar.append('<li class="csPreviousPage" title="' + msg.prev_title + '" ><a href="javascript:void(0);"><i class="' + iconPrev + '"></i></a></li>')
				//pagination information
				pagebar.append('<li class="pageInfoBox"><a href="javascript:void(0);"> ' + updatePageInfo() + ' </a></li>')

				pagebar.append('<li class="csNextPage" title="' + msg.next_title + '" ><a href="javascript:void(0);"><i class="' + iconNext + '"></i></a></li>')
				pagebar.append('<li class="csLastPage" title="' + msg.last_title + '" ><a href="javascript:void(0);"> <i class="' + iconLast + '"></i> </a></li>')
				pagebar.show()
			} else {
				pagebar.find('li.pageInfoBox a').html(updatePageInfo())
			}
		}

		var pagebar = self.elem.navi.find('ul'),
			last_page = Math.ceil(cnt_whole / self.option.pageSize); //calculate total page
		if (last_page === 0) page_num = 0
		else {
			if (last_page < page_num) page_num = last_page
			else if (page_num === 0) page_num = 1
		}
		self.prop.current_page = page_num;//update current page number
		self.prop.max_page = last_page;//update page count
		buildPageNav(self, pagebar, page_num, last_page)

		//update paging status
		var dClass = 'disabled',
			first = pagebar.find('li.csFirstPage'),
			previous = pagebar.find('li.csPreviousPage'),
			next = pagebar.find('li.csNextPage'),
			last = pagebar.find('li.csLastPage')
		//first and previous
		if (page_num === 1 || page_num === 0) {
			if (!first.hasClass(dClass)) first.addClass(dClass)
			if (!previous.hasClass(dClass)) previous.addClass(dClass)
		} else {
			if (first.hasClass(dClass)) first.removeClass(dClass)
			if (previous.hasClass(dClass)) previous.removeClass(dClass)
		}
		//next and last
		if (page_num === last_page || last_page === 0) {
			if (!next.hasClass(dClass)) next.addClass(dClass)
			if (!last.hasClass(dClass)) last.addClass(dClass)
		} else {
			if (next.hasClass(dClass)) next.removeClass(dClass)
			if (last.hasClass(dClass)) last.removeClass(dClass)
		}

		if (last_page > 1) self.ePaging(); //pagination event bind
	}

	/**
	 * Render result list
	 * @param {Object} self
	 * @param {Object} json - result data
	 * @param {boolean} is_query - used to different from search to open and just click to open
	 */
	SelectPage.prototype.displayResults = function (self, json, is_query) {
		var p = self.option, el = self.elem
		el.results.hide().empty()
		if (p.multiple && $.type(p.maxSelectLimit) === 'number' && p.maxSelectLimit > 0) {
			var selectedSize = el.element_box.find('li.selected_tag').length
			if (selectedSize > 0 && selectedSize >= p.maxSelectLimit) {
				var msg = self.message.max_selected
				self.showMessage(self, msg.replace(self.template.msg.maxSelectLimit, p.maxSelectLimit))
				return
			}
		}

		if (json.candidate.length) {
			var arr_candidate = json.candidate,
				arr_primary_key = json.keyField,
				keystr = el.hidden.val(),
				keyArr = keystr ? keystr.split(',') : new Array(),
				itemText = '', itemThumb = ''
			for (var i = 0; i < arr_candidate.length; i++) {
				if (p.formatItem && $.isFunction(p.formatItem)) {
					try {
						itemText = p.formatItem(json.originalResult[i])
					} catch (e) {
						console.error('formatItem内容格式化函数内容设置不正确！')
						itemText = arr_candidate[i].text
						itemThumb = arr_candidate[i].thumb
					}
				} else {
					itemText = arr_candidate[i].text
					itemThumb = arr_candidate[i].thumb
				}
				var itemHtml = '<span class="sp_item_text">'+itemText+'</span>';
				if(itemThumb) itemHtml = '<img class="sp_item_thumb" src="'+itemThumb+'" />'+itemHtml;
				var list = $('<li>').html(itemHtml).attr({
					pkey: arr_primary_key[i]
				})
				if (!p.formatItem) list.attr('title', itemText)

				//Set selected item highlight
				if ($.inArray(arr_primary_key[i].toString(), keyArr) !== -1) {
					list.addClass(self.css_class.selected)
				}
				//cache item data
				list.data('dataObj', json.originalResult[i])
				el.results.append(list)
				if(itemThumb){
					list.on('mouseover',function(){
						var $img=$(this).children('.sp_item_thumb');
						var $box=$('<div class="sp_item_thumb_lg"><img src="'+$img.attr('src')+'" /></div>');
						$(this).prepend($box)
						var imgHalfHeight=$box.height()/2-$img.height()/2;
						var css={left:-$box.width(),top:$img.position().top-imgHalfHeight}
						var pos=$(this).closest('.sp_result_area').position();
						var leftOffset=pos.left;
						if(leftOffset<$box.width()) {
							var maxWidth=leftOffset;
							$box.children('img').css({maxWidth:maxWidth})
							css.left=-$box.width();
							imgHalfHeight=$box.height()/2-$img.height()/2;
							css.top=$img.position().top-imgHalfHeight;
						}
						$box.css(css)
					}).on('mouseout',function(){
						$(this).children('.sp_item_thumb_lg').remove();
					})
				}
			}
		} else {
			var li = '<li class="' + self.css_class.message_box + '"><i class="sp-iconfont if-warning"></i> ' +
				self.message.not_found + '</li>'
			el.results.append(li)
		}
		el.results.show()

		if (p.multiple && p.multipleControlbar) el.control.show()
		if (p.pagination) el.navi.show()
		self.calcResultsSize(self)
		self.setOpenStatus(self, true)

		//Result item event bind
		self.eResultList()
		//scrolling listen
		self.eScroll()
		//auto highlight first item in search, have result and set autoSelectFirst to true situation
		if (is_query && json.candidate.length && p.autoSelectFirst) self.nextLine(self)
	}

	/**
	 * Calculate result list size and position
	 * @param {Object} self
	 */
	SelectPage.prototype.calcResultsSize = function (self) {
		var p = self.option, el = self.elem
		var rePosition = function () {
			if (el.container.css('position') === 'static') {
				// position: static
				var offset = el.combo_input.offset()
				el.result_area.css({
					top: offset.top + el.combo_input.outerHeight() + 'px',
					left: offset.left + 'px', zIndex: p.defaultZindex
				})
			} else {
				if (!p.pagination) {
					var itemHeight = el.results.find('li:first').outerHeight(true),
						listHeight = itemHeight * p.listSize
					el.results.css({
						'max-height': listHeight,
						'overflow-y': 'auto'
					})
				}

				//handle result list show up side(left, right, up or down)
				var docWidth = $(document).width(),
					docHeight = $(document).height(),//the document full height
					viewHeight = $(window).height(),//browser visible area height
					offset = el.container.offset(),
					screenScrollTop = $(window).scrollTop(),
					listWidth = el.result_area.outerWidth(),
					//result list height
					listHeight = el.result_area.outerHeight(),
					//default left used input element left
					defaultLeft = offset.left,//p.multiple ? -1 : 0
					//input element height
					inputHeight = el.container.outerHeight(),
					left = (offset.left + listWidth) > docWidth ?
						defaultLeft - (listWidth - el.container.outerWidth()) :
						defaultLeft,
					//the actual top coordinate of input element(outer div)
					screenTop = offset.top,//$(el.container).scrollTop();//offset.top - screenScrollTop
					top = 0, dist = 5,//set distance between input element and result list
					//the actual top coordinate of result list
					listBottom = screenTop + inputHeight + listHeight + dist,
					hasOverflow = docHeight > viewHeight

				if ((screenTop - screenScrollTop - dist > listHeight) &&
					(hasOverflow && listBottom > (viewHeight + screenScrollTop)) ||
					(!hasOverflow && listBottom > viewHeight)) {
					//open up
					top = offset.top - listHeight - dist
					el.result_area.removeClass('shadowUp shadowDown').addClass('shadowUp')
				} else {
					//open down
					top = offset.top + (p.multiple ? el.container.outerHeight() : inputHeight)
					el.result_area.removeClass('shadowUp shadowDown').addClass('shadowDown')
					top += dist
				}
				return {
					top: top + 'px', left: left + 'px', zIndex: p.defaultZindex
				}
			}
		}
		if (el.result_area.is(':visible')) {
			el.result_area.css(rePosition())
		} else {
			var pss = rePosition()
			el.result_area.css(pss).show(1, function () {
				var repss = rePosition()
				if (pss.top !== repss.top || pss.left !== repss.left) el.result_area.css(repss)
			})
		}
	}

	/**
	 * hide result list
	 * @param {Object} self
	 */
	SelectPage.prototype.hideResults = function (self) {
		if (self.prop.key_paging) {
			self.scrollWindow(self, true)
			self.prop.key_paging = false
		}
		self.setCssFocusedInput(self)

		if (self.option.autoFillResult) {
			//self.selectCurrentLine(self, true)
		}

		self.elem.results.empty()
		self.elem.result_area.hide()
		self.setOpenStatus(self, false)
		//unbind window scroll listen
		$(window).off('scroll.SelectPage')

		self.abortAjax(self)
		self.setButtonAttrDefault()
	}

	/**
	 * set plugin to disabled / enabled
	 * @param self
	 * @param disabled
	 */
	SelectPage.prototype.disabled = function (self, disabled) {
		var p = self.option, el = self.elem
		if ($.type(disabled) === 'undefined') return el.combo_input.prop('disabled')
		if ($.type(disabled) === 'boolean') {
			el.combo_input.prop('disabled', disabled)
			if (disabled) el.container.addClass(self.css_class.disabled)
			else el.container.removeClass(self.css_class.disabled)
		}
	}

	/**
	 * Go fist page
	 * @param {Object} self
	 */
	SelectPage.prototype.firstPage = function (self) {
		if (self.prop.current_page > 1) {
			self.prop.current_page = 1
			self.prop.page_move = true
			self.suggest(self)
		}
	}

	/**
	 * Go previous page
	 * @param {Object} self
	 */
	SelectPage.prototype.prevPage = function (self) {
		if (self.prop.current_page > 1) {
			self.prop.current_page--
			self.prop.page_move = true
			self.suggest(self)
		}
	}

	/**
	 * Go next page
	 * @param {Object} self
	 */
	SelectPage.prototype.nextPage = function (self) {
		if (self.prop.current_page < self.prop.max_page) {
			self.prop.current_page++
			self.prop.page_move = true
			self.suggest(self)
		}
	}

	/**
	 * Go last page
	 * @param {Object} self
	 */
	SelectPage.prototype.lastPage = function (self) {
		if (self.prop.current_page < self.prop.max_page) {
			self.prop.current_page = self.prop.max_page
			self.prop.page_move = true
			self.suggest(self)
		}
	}
	/**
	 * do something after select/unSelect action
	 * @param {Object} self
	 * @param {boolean} reOpen
	 */
	SelectPage.prototype.afterAction = function (self, reOpen) {
		self.inputResize(self)
		self.elem.combo_input.change()
		self.setCssFocusedInput(self)
		if (self.prop.init_set) return
		if (self.option.multiple) {
			if (self.option.selectToCloseList) {
				self.hideResults(self)
				self.elem.combo_input.blur()
			}
			if (!self.option.selectToCloseList && reOpen) {
				self.suggest(self)
				self.elem.combo_input.focus()
			}
		} else {
			self.hideResults(self)
			self.elem.combo_input.blur()
		}
	}

	/**
	 * Select current list item
	 * @param {Object} self
	 * @param {boolean} is_enter_key
	 */
	SelectPage.prototype.selectCurrentLine = function (self, is_enter_key) {
		self.scrollWindow(self, true)

		var p = self.option, current = self.getCurrentLine(self)
		if (current) {
			var data = current.data('dataObj')
			if (!p.multiple) {
				self.elem.combo_input.val(current.text())
				self.elem.hidden.val(current.attr('pkey'))
			} else {
				//build tags in multiple selection mode
				self.elem.combo_input.val('')
				var item = { text: current.text(), value: current.attr('pkey') }
				if (!self.isAlreadySelected(self, item)) {
					self.addNewTag(self, data, item)
					self.tagValuesSet(self)
				}
			}

			if (p.selectOnly) self.setButtonAttrDefault()

			//Select item callback
			if (p.eSelect && $.isFunction(p.eSelect)) p.eSelect(data, self)

			self.prop.prev_value = self.elem.combo_input.val()
			self.prop.selected_text = self.elem.combo_input.val()

			self.elem.combo_input.trigger('input')

			self.putClearButton()
		}
		self.afterAction(self, true)
	}
	/**
	 * Show clear button when item selected in single selection mode
	 */
	SelectPage.prototype.putClearButton = function () {
		if (!this.option.multiple && !this.elem.combo_input.prop('disabled')) this.elem.container.append(this.elem.clear_btn)
	}
	/**
	 * Select all list item
	 * @param {Object} self
	 */
	SelectPage.prototype.selectAllLine = function (self) {
		var p = self.option, jsonarr = new Array()
		self.elem.results.find('li').each(function (i, row) {
			var $row = $(row), data = $row.data('dataObj')
			var item = { text: $row.children('span.sp_item_text').text(), value: $row.attr('pkey') }
			if (!self.isAlreadySelected(self, item)) {
				self.addNewTag(self, data, item)
				self.tagValuesSet(self)
			}
			jsonarr.push(data)
			//limited max selected items
			if ($.type(p.maxSelectLimit) === 'number' &&
				p.maxSelectLimit > 0 &&
				p.maxSelectLimit === self.elem.element_box.find('li.selected_tag').length) {
				return false
			}
		})
		if (p.eSelect && $.isFunction(p.eSelect)) p.eSelect(jsonarr, self)
		self.elem.combo_input.trigger('input')
		self.afterAction(self, true)
	}
	/**
	 * Cancel select all item in current page
	 * @param {Object} self
	 */
	SelectPage.prototype.unSelectAllLine = function (self) {
		var p = self.option, ds = []
		self.elem.results.find('li').each(function (i, row) {
			var key = $(row).attr('pkey')
			var tag = self.elem.element_box.find('li.selected_tag[itemvalue="' + key + '"]')
			if (tag.length) ds.push(tag.data('dataObj'))
			self.removeTag(self, tag)
		})
		self.afterAction(self, true)
		if (p.eTagRemove && $.isFunction(p.eTagRemove)) p.eTagRemove(ds)
	}
	/**
	 * Clear all selected items
	 * @param {Object} self
	 * @param {boolean} open - open list after clear selected item
	 */
	SelectPage.prototype.clearAll = function (self, open) {
		var p = self.option, ds = []
		if (p.multiple) {
			self.elem.element_box.find('li.selected_tag').each(function (i, row) {
				ds.push($(row).data('dataObj'))
				row.remove()
			})
			self.elem.element_box.find('li.selected_tag').remove()
		}
		self.reset(self)
		self.afterAction(self, open)

		if (p.multiple) {
			if (p.eTagRemove && $.isFunction(p.eTagRemove)) p.eTagRemove(ds)
		} else self.elem.clear_btn.remove()
	}

	/**
	 * reset
	 */
	SelectPage.prototype.reset = function (self) {
		self.elem.combo_input.val('')
		self.elem.hidden.val('')
		self.prop.prev_value = ''
		self.prop.selected_text = ''
		self.prop.current_page = 1
	}

	/**
	 * Get current highlight item
	 * @param {Object} self
	 */
	SelectPage.prototype.getCurrentLine = function (self) {
		if (self.elem.result_area.is(':hidden')) return false
		var obj = self.elem.results.find('li.' + self.css_class.select)
		if (obj.length) return obj
		else return false
	}

	/**
	 * Check the result item is already selected or not
	 * @param {Object} self
	 * @param {Object} item - item info
	 */
	SelectPage.prototype.isAlreadySelected = function (self, item) {
		var isExist = false
		if (item.value) {
			var keys = self.elem.hidden.val()
			if (keys) {
				var karr = keys.split(',')
				if (karr && karr.length && $.inArray(item.value, karr) != -1) isExist = true
			}
		}
		return isExist
	}

	/**
	 * Add a new tag in multiple selection mode
	 * @param {Object} self
	 * @param {object} data - raw row data
	 * @param {Object} item
	 */
	SelectPage.prototype.addNewTag = function (self, data, item) {
		if (!self.option.multiple || !data || !item) return
		var tmp = self.template.tag.content, tag, text = item.text, p = self.option
		if (p.formatItem && $.isFunction(p.formatItem)) text = p.formatItem(data)
		var textHtml = '<span class="sp_item_text">'+text+'</span>';
		if (p.thumbField && p.thumbField in data) textHtml = '<img class="sp_item_thumb" src="'+data[p.thumbField]+'" />'+textHtml
		tmp = tmp.replace(self.template.tag.textKey, textHtml)
		tmp = tmp.replace(self.template.tag.valueKey, item.value)
		tag = $(tmp)
		tag.prop('draggable',true);
		tag.data('dataObj', data);
		tag.children('*').prop('draggable',false);
		if (self.elem.combo_input.prop('disabled')) tag.find('span.tag_close').hide()
		self.elem.combo_input.closest('li').before(tag)
		if(!self.elem.element_box.data('inited')){
			self.elem.element_box.data('inited',true);
			draggable(self.elem.element_box[0],function(event){
				self.tagValuesSet(self)
			});
		}
		tag.children('.sp_item_thumb').on('mouseover',function(){
			var $img=$(this);
			var $box=$('<div class="sp_item_thumb_lg"><img src="'+$img.attr('src')+'" /></div>');
			$(this).before($box)
			var leftOffset=$(this).position().left-$box.width()-$img.width()/2;
			var topOffset=$img.position().top-($box.height()/2-$img.height()/2);
			var pos=$(this).closest('.sp_container_combo').offset();
			var leftAbsOffset=pos.left+$(this).position().left-$img.width()/2;
			if(leftAbsOffset<$box.width()) {
				var maxWidth=leftAbsOffset;
				$box.children('img').css({maxWidth:maxWidth})
				leftOffset=$(this).position().left-$box.width()-$img.width()/2;
				topOffset=$img.position().top-($box.height()/2-$img.height()/2);
			}
			var css={left:leftOffset,top:topOffset}
			$box.css(css)
		}).on('mouseout',function(){
			$(this).prev('.sp_item_thumb_lg').remove();
		})
	}

	SelectPage.prototype.draggable = draggable;

function draggable(node,ondrop) {
	//var node = document.querySelector("#container")
	var draging = null
	node.ondragstart = function(event) {draging = event.target}
	node.ondragover = function(event) {
		event.preventDefault()
		var target = event.target
		if (target.nodeName === "LI" && target !== draging) {
			// 获取初始位置
			var targetRect = target.getBoundingClientRect()
			var dragingRect = draging.getBoundingClientRect()
			// 判断是否动画元素
			if (target.animated) return;
			if (_index(draging) < _index(target)) {
				// 目标比元素大，插到其后面
				// nextSibling下一个兄弟元素
				target.parentNode.insertBefore(draging, target.nextSibling)
			} else {
				// 目标比元素小，插到其前面
				target.parentNode.insertBefore(draging, target)
			}
			_animate(dragingRect, draging)
			_animate(targetRect, target)
		}
	}
	if(ondrop) node.ondrop = ondrop;
	// 获取元素在父元素中的index
	function _index(el) {
		var index = 0
		if (!el || !el.parentNode) {
			return -1
		}
		// previousElementSibling：上一个兄弟元素
		while (el && (el = el.previousElementSibling)) {
			index++
		}
		return index
	}
	// 触发动画
	function _animate(prevRect, target) {
		var ms = 300
		if (!ms) return;
		var currentRect = target.getBoundingClientRect()
		if (prevRect.nodeType === 1) prevRect = prevRect.getBoundingClientRect()
		_css(target, 'transition', 'none')
		_css(target, 'transform', 'translate3d(' +
			(prevRect.left - currentRect.left) + 'px,' +
			(prevRect.top - currentRect.top) + 'px,0)'
		);
		target.offsetWidth; // 触发重绘
		_css(target, 'transition', 'all ' + ms + 'ms');
		_css(target, 'transform', 'translate3d(0,0,0)');
		// 事件到了之后把transition和transform清空
		clearTimeout(target.animated);
		target.animated = setTimeout(function() {
			_css(target, 'transition', '');
			_css(target, 'transform', '');
			target.animated = false;
		}, ms);
	}
	// 给元素添加style
	function _css(el, prop, val) {
		var style = el && el.style
		if (!style) return;
		if (val === void 0) {
			if (document.defaultView && document.defaultView.getComputedStyle) {
				val = document.defaultView.getComputedStyle(el, '')
			} else if (el.currentStyle) {
				val = el.currentStyle
			}
			return prop === void 0 ? val : val[prop]
		} 
		if (!(prop in style)) {
			prop = '-webkit-' + prop;
		}
		style[prop] = val + (typeof val === 'string' ? '' : 'px')
	}
}

	/**
	 * Remove a tag in multiple selection mode
	 * @param {Object} self
	 * @param {Object} item
	 */
	SelectPage.prototype.removeTag = function (self, item) {
		var key = $(item).attr('itemvalue')
		var keys = self.elem.hidden.val()
		if ($.type(key) != 'undefined' && keys) {
			var keyarr = keys.split(','),
				index = $.inArray(key.toString(), keyarr)
			if (index != -1) {
				keyarr.splice(index, 1)
				self.elem.hidden.val(keyarr.toString())
			}
		}
		$(item).remove()
		self.inputResize(self)
	}

	/**
	 * Selected item value(keyField) put in to hidden element
	 * @param {Object} self
	 */
	SelectPage.prototype.tagValuesSet = function (self) {
		if (!self.option.multiple) return
		var tags = self.elem.element_box.find('li.selected_tag')
		if (tags && tags.length) {
			var result = new Array()
			$.each(tags, function (i, li) {
				var v = $(li).attr('itemvalue')
				if ($.type(v) !== 'undefined') result.push(v)
			})
			if (result.length) {
				self.elem.hidden.val(result.join(','))
			}
		}
	}

	/**
	 * auto resize input element width in multiple select mode
	 * @param {Object} self
	 */
	SelectPage.prototype.inputResize = function (self) {
		if (!self.option.multiple) return
		var inputLi = self.elem.combo_input.closest('li')
		var setDefaultSize = function (self, inputLi) {
			inputLi.removeClass('full_width')
			var minimumWidth = self.elem.combo_input.val().length + 1,
				width = (minimumWidth * 0.75) + 'em'
			self.elem.combo_input.css('width', width).removeAttr('placeholder')
		}
		if (self.elem.element_box.find('li.selected_tag').length === 0) {
			if (self.elem.combo_input.attr('placeholder_bak')) {
				if (!inputLi.hasClass('full_width')) inputLi.addClass('full_width')
				self.elem.combo_input.attr('placeholder', self.elem.combo_input.attr('placeholder_bak')).removeAttr('style')
			} else setDefaultSize(self, inputLi)
		} else setDefaultSize(self, inputLi)
	}

	/**
	 * Move to next line
	 * @param {Object} self
	 */
	SelectPage.prototype.nextLine = function (self) {
		var obj = self.getCurrentLine(self), idx
		if (!obj) idx = -1
		else {
			idx = self.elem.results.children('li').index(obj)
			obj.removeClass(self.css_class.select)
		}
		idx++
		if (idx < self.elem.results.children('li').length) {
			var next = self.elem.results.children('li').eq(idx)
			next.addClass(self.css_class.select)
			self.setCssFocusedResults(self)
		} else self.setCssFocusedInput(self)
		self.scrollWindow(self, false)
	}

	/**
	 * Move to previous line
	 * @param {Object} self
	 */
	SelectPage.prototype.prevLine = function (self) {
		var obj = self.getCurrentLine(self), idx
		if (!obj) idx = self.elem.results.children('li').length
		else {
			idx = self.elem.results.children('li').index(obj)
			obj.removeClass(self.css_class.select)
		}
		idx--
		if (idx > -1) {
			var prev = self.elem.results.children('li').eq(idx)
			prev.addClass(self.css_class.select)
			self.setCssFocusedResults(self)
		} else self.setCssFocusedInput(self)
		self.scrollWindow(self, false)
	}


	/**
	 * SelectPage plugin definition
	 * @global
	 * @param option {Object} init plugin option
	 */
	function Plugin(option) {
		return this.each(function () {
			var $this = $(this),
				data = $this.data(SelectPage.dataKey),
				params = $.extend({}, defaults, $this.data(), data && data.option, typeof option === 'object' && option)
			if (!data) $this.data(SelectPage.dataKey, (data = new SelectPage(this, params)))
		})
	}

	/**
	 * Get plugin object
	 * @param {object} obj 
	 * @returns 
	 */
	function getPlugin(obj) {
		return $(obj).closest('div.sp_container').find('input.sp_input')
	}

	/**
	 * Clear all selected item
	 */
	function ClearSelected() {
		return this.each(function () {
			var $this = getPlugin(this),
				data = $this.data(SelectPage.dataKey)
			if (data) {
				data.prop.init_set = true
				data.clearAll(data)
				data.prop.init_set = false
			}
		})
	}

	/**
	 * Refresh result list
	 * use case:
	 * 1.use $(obj).val('xxx') to modify selectpage selected item key
	 * 2.refresh selected item show content/tag text
	 */
	function SelectedRefresh() {
		return this.each(function () {
			var $this = getPlugin(this),
				data = $this.data(SelectPage.dataKey)
			if (data && data.elem.hidden.val())
				data.setInitRecord(true)
		})
	}

	/**
	 * Modify plugin datasource, only work on json datasource mode
	 * @param {array} data - new datasource
	 * @example
	 * [{name:'aa',sex:1},{name:'bb',sex:0},{...}]
	 */
	function ModifyDataSource(data) {
		return this.each(function () {
			if (data && $.isArray(data)) {
				var $this = getPlugin(this),
					plugin = $this.data(SelectPage.dataKey)
				if (plugin) {
					plugin.clearAll(plugin)
					plugin.option.data = data
				}
			}
		})
	}

	/**
	 * Get plugin disabled status or Modify plugin disabled status
	 * @param disabled {boolean} set disabled status
	 */
	function PluginDisabled(disabled) {
		var status = false
		this.each(function () {
			var $this = getPlugin(this),
				plugin = $this.data(SelectPage.dataKey)
			if (plugin) {
				if ($.type(disabled) !== 'undefined')
					plugin.disabled(plugin, disabled)
				else
					status = plugin.disabled(plugin)
			}
		})
		return status
	}

	/**
	 * Get selected item text
	 * @returns {string}
	 */
	function GetInputText() {
		var str = ''
		this.each(function () {
			var $this = getPlugin(this), data = $this.data(SelectPage.dataKey)
			if (data) {
				if (data.option.multiple) {
					var tags = []
					data.elem.element_box.find('li.selected_tag').each(function (i, tag) {
						tags.push($(tag).text())
					})
					str += tags.toString()
				} else {
					str += data.elem.combo_input.val()
				}
			}
		})
		return str
	}

	var old = $.fn.selectPage

	$.fn.selectPage = Plugin
	$.fn.selectPage.Constructor = SelectPage
	$.fn.selectPageClear = ClearSelected
	$.fn.selectPageRefresh = SelectedRefresh
	$.fn.selectPageData = ModifyDataSource
	$.fn.selectPageDisabled = PluginDisabled
	$.fn.selectPageText = GetInputText

	// SelectPage no conflict
	// =================
	$.fn.selectPage.noConflict = function () {
		$.fn.selectPage = old
		return this
	}
})(window.jQuery);