boottstrap 소스 코드 학습 및 예제: boottstrap - type: ahead
14064 단어 bootstrap
명칭.
유형
묵인
묘사 하 다.
source
배열
[ ]
조회 에 사용 할 데이터 원본 입 니 다.
items
숫자.
8
드 롭 다운 목록 의 최대 표시 개수 입 니 다.
matcher
함수.
대소 문자 구분 없 음
이 matcher 함 수 는 어떤 항목 이 일치 하 는 지 여 부 를 결정 하 는 데 사 용 됩 니 다.이것 은 유일한 매개 변 수 를 받 아들 여 조회 에 부합 되 는 지 테스트 하 는 데 사용 합 니 다.
item 를 통 해 현재 조 회 를 방문 하고 조회 와 일치 하면 불 값 this.query 을 되 돌려 줍 니 다.sorter
함수.
정확하게 일치 하고 대소 문 자 를 구분 하 며 대소 문 자 를 구분 하지 않 습 니 다.
이 함 수 는 자동 으로 완 성 된 결 과 를 정렬 하 는 데 쓰 인 다.유일한 인자
true 를 받 아들 이 고 알림 을 입력 하 는 범위 도 있 습 니 다.사용 items 현재 조 회 를 참조 합 니 다.highlighter
함수.
모든 기본 일치 강조
이 함 수 는 자동 으로 완 성 된 결 과 를 강조 하 는 데 쓰 인 다.유일한 인자
this.query 를 받 아들 이 고 알림 을 입력 하 는 범위 도 있 습 니 다.html 로 돌아 가 야 합 니 다.
!function($){
"use strict"; // jshint ;_;
/* TYPEAHEAD PUBLIC CLASS DEFINITION
* ================================= */
var Typeahead = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.typeahead.defaults, options)
this.matcher = this.options.matcher || this.matcher// matcher
this.sorter = this.options.sorter || this.sorter// sorter
this.highlighter = this.options.highlighter || this.highlighter// highlighter
this.updater = this.options.updater || this.updater// updater
this.source = this.options.source
this.$menu = $(this.options.menu)//UL
this.shown = false
this.listen()
}
Typeahead.prototype = {
constructor: Typeahead
,
select: function () {
var val = this.$menu.find('.active').attr('data-value')
this.$element
.val(this.updater(val))
.change()
return this.hide()
}
,
updater: function (item) {
return item
}
,
show: function () {
var pos = $.extend({}, this.$element.position(), {
height: this.$element[0].offsetHeight
})
this.$menu
.insertAfter(this.$element)
.css({
top: pos.top + pos.height
,
left: pos.left
})
.show()
this.shown = true
return this
}
,
hide: function () {
this.$menu.hide()
this.shown = false
return this
}
,
lookup: function (event) {
var items
this.query = this.$element.val()
//
if (!this.query || this.query.length < this.options.minLength) {
return this.shown ? this.hide() : this
}
items = $.isFunction(this.source) ? this.source(this.query, $.proxy(this.process, this)) : this.source
console.log(items)
return items ? this.process(items) : this
}
,
process: function (items) {
var that = this
//
items = $.grep(items, function (item) {
return that.matcher(item)
})
//
items = this.sorter(items)
if (!items.length) {
return this.shown ? this.hide() : this
}
// LI this.options.items ，
return this.render(items.slice(0, this.options.items)).show()
}
,
matcher: function (item) {// ，
return ~item.toLowerCase().indexOf(this.query.toLowerCase())
}
,
sorter: function (items) {// ， beginswith，caseSensitive，caseInsensitive
var beginswith = []
, caseSensitive = []
, caseInsensitive = []
, item
while (item = items.shift()) {
if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
else if (~item.indexOf(this.query)) caseSensitive.push(item)
else caseInsensitive.push(item)
}
return beginswith.concat(caseSensitive, caseInsensitive)
}
,
highlighter: function (item) {//item
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')//
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'// LI innerHTML strong
})
}
,
render: function (items) {
var that = this
items = $(items).map(function (i, item) {
i = $(that.options.item).attr('data-value', item)
i.find('a').html(that.highlighter(item))
return i[0]
})
items.first().addClass('active')
this.$menu.html(items)
return this
}
, //
next: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, next = active.next()
if (!next.length) {
next = $(this.$menu.find('li')[0])
}
next.addClass('active')
}
, //
prev: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, prev = active.prev()
if (!prev.length) {
prev = this.$menu.find('li').last()
}
prev.addClass('active')
}
,
listen: function () {
this.$element
.on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
if (this.eventSupported('keydown')) {
this.$element.on('keydown', $.proxy(this.keydown, this))
}
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
}
// ，
,
eventSupported: function(eventName) {
var isSupported = eventName in this.$element
if (!isSupported) {
this.$element.setAttribute(eventName, 'return;')
isSupported = typeof this.$element[eventName] === 'function'
}
return isSupported
}
,
move: function (e) {
if (!this.shown) return
switch(e.keyCode) {
case 9: // tab
case 13: // enter
case 27: // escape
e.preventDefault()
break
case 38: // up arrow
e.preventDefault()
this.prev()
break
case 40: // down arrow
e.preventDefault()
this.next()
break
}
e.stopPropagation()
}
,
keydown: function (e) {// keydown keypress
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27])
this.move(e)
}
,
keypress: function (e) {
if (this.suppressKeyPressRepeat) return
this.move(e)
}
,
keyup: function (e) {
switch(e.keyCode) {
// keydown
case 40: // down arrow
case 38: // up arrow
case 16: // shift
case 17: // ctrl
case 18: // alt
break
case 9: // tab
case 13: // enter
if (!this.shown) return
this.select()
break
case 27: // escape
if (!this.shown) return
this.hide()
break
default:
this.lookup()
}
e.stopPropagation()
e.preventDefault()
}
,
blur: function (e) {//
var that = this
setTimeout(function () {
that.hide()
}, 150)
}
,
click: function (e) {//
e.stopPropagation()
e.preventDefault()
this.select()
}
,
mouseenter: function (e) {
this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active')
}
}
/* TYPEAHEAD PLUGIN DEFINITION
* =========================== */
var old = $.fn.typeahead
$.fn.typeahead = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typeahead')
, options = typeof option == 'object' && option
if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.typeahead.defaults = {
source: []
,
items: 8
,
menu: '<ul class="typeahead dropdown-menu"></ul>'
,
item: '<li><a href="#"></a></li>'
,
minLength: 1
}
$.fn.typeahead.Constructor = Typeahead
/* TYPEAHEAD NO CONFLICT
* =================== */
$.fn.typeahead.noConflict = function () {
$.fn.typeahead = old
return this
}
/* TYPEAHEAD DATA-API
* ================== */
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
var $this = $(this)
if ($this.data('typeahead')) return
e.preventDefault()
$this.typeahead($this.data())// data-*
})
}(window.jQuery);
< title > boottstrap 학습 by 사도 정미 < / title >
data-source="["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]">
실행 코드
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
