searchableSelect: fix autocomp. pos and
This commit is contained in:
parent
07925e665c
commit
d6c78469ad
2 changed files with 16 additions and 6 deletions
|
@ -3,6 +3,7 @@ class App.SearchableSelect extends Spine.Controller
|
||||||
events:
|
events:
|
||||||
'input .js-input': 'onInput'
|
'input .js-input': 'onInput'
|
||||||
'blur .js-input': 'onBlur'
|
'blur .js-input': 'onBlur'
|
||||||
|
'focus .js-input': 'onFocus'
|
||||||
'click .js-option': 'selectItem'
|
'click .js-option': 'selectItem'
|
||||||
'mouseenter .js-option': 'highlightItem'
|
'mouseenter .js-option': 'highlightItem'
|
||||||
'shown.bs.dropdown': 'onDropdownShown'
|
'shown.bs.dropdown': 'onDropdownShown'
|
||||||
|
@ -97,14 +98,16 @@ class App.SearchableSelect extends Spine.Controller
|
||||||
caretPosition = @invisiblePart.text().length + 1
|
caretPosition = @invisiblePart.text().length + 1
|
||||||
|
|
||||||
@input.val @suggestion
|
@input.val @suggestion
|
||||||
|
@shadowInput.val @suggestionValue
|
||||||
@clearAutocomplete()
|
@clearAutocomplete()
|
||||||
@toggle()
|
@toggle()
|
||||||
|
|
||||||
@input.prop('selectionStart', caretPosition)
|
@input.prop('selectionStart', caretPosition)
|
||||||
@input.prop('selectionEnd', caretPosition)
|
@input.prop('selectionEnd', caretPosition)
|
||||||
|
|
||||||
autocomplete: (text) ->
|
autocomplete: (value, text) ->
|
||||||
@suggestion = text
|
@suggestion = text
|
||||||
|
@suggestionValue = value
|
||||||
startIndex = text.indexOf(@query)
|
startIndex = text.indexOf(@query)
|
||||||
|
|
||||||
if !@query or startIndex != 0
|
if !@query or startIndex != 0
|
||||||
|
@ -146,7 +149,12 @@ class App.SearchableSelect extends Spine.Controller
|
||||||
@toggle()
|
@toggle()
|
||||||
|
|
||||||
onBlur: ->
|
onBlur: ->
|
||||||
# @clearAutocomplete()
|
@clearAutocomplete()
|
||||||
|
|
||||||
|
onFocus: ->
|
||||||
|
textEnd = @input.val().length
|
||||||
|
@input.prop('selectionStart', textEnd)
|
||||||
|
@input.prop('selectionEnd', textEnd)
|
||||||
|
|
||||||
onInput: (event) =>
|
onInput: (event) =>
|
||||||
@toggle() if not @isOpen
|
@toggle() if not @isOpen
|
||||||
|
@ -163,12 +171,14 @@ class App.SearchableSelect extends Spine.Controller
|
||||||
@textContent.match(regex)
|
@textContent.match(regex)
|
||||||
.removeClass 'is-hidden'
|
.removeClass 'is-hidden'
|
||||||
|
|
||||||
@highlightFirst()
|
@highlightFirst(true)
|
||||||
|
|
||||||
highlightFirst: ->
|
highlightFirst: (autocomplete) ->
|
||||||
first = @option_items.removeClass('is-active').not('.is-hidden').first()
|
first = @option_items.removeClass('is-active').not('.is-hidden').first()
|
||||||
first.addClass 'is-active'
|
first.addClass 'is-active'
|
||||||
@autocomplete first.text().trim()
|
|
||||||
|
if autocomplete
|
||||||
|
@autocomplete first.attr('data-value'), first.text().trim()
|
||||||
|
|
||||||
highlightItem: (event) =>
|
highlightItem: (event) =>
|
||||||
@option_items.removeClass('is-active')
|
@option_items.removeClass('is-active')
|
||||||
|
|
|
@ -7041,7 +7041,7 @@ output {
|
||||||
.searchableSelect-autocomplete {
|
.searchableSelect-autocomplete {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 13px;
|
left: 13px;
|
||||||
top: 10px;
|
top: 11px;
|
||||||
right: 37px;
|
right: 37px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
Loading…
Reference in a new issue