Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !7405

Pull For Issue #7384 Typeahead Positioning

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/jstromergalley/3.0.0-wip into 3.0.0-wip 12 years ago
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 3

Created by: jstromergalley

Allow the specification of left (default) or right alignment with the input control. Allow the specification of display below (default) or above the input control.

Compare
  • 3.0.0-wip (base)

and
  • latest version
    24ae6308
    1 commit, 2 years ago

3 files
+ 39
- 2

    Preferences

    File browser
    Compare changes
do‎cs‎
javascr‎ipt.html‎ +12 -0
j‎s‎
tests‎/unit‎
bootstrap-t‎ypeahead.js‎ +22 -0
bootstrap-t‎ypeahead.js‎ +5 -2
docs/javascript.html
+ 12
- 0
  • View file @ 24ae6308


@@ -1782,6 +1782,18 @@ $('.typeahead').typeahead()
<td>highlights all default matches</td>
<td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
</tr>
<tr>
<td>align</td>
<td>string</td>
<td>left</td>
<td>Aligns the dropdown with the left or right side of the input control - left | right</td>
</tr>
<tr>
<td>position</td>
<td>string</td>
<td>below</td>
<td>Specifies if autocomplete drops down or drops up from the input control - below | above</td>
</tr>
</tbody>
</table>
js/tests/unit/bootstrap-typeahead.js
+ 22
- 0
  • View file @ 24ae6308


@@ -56,6 +56,28 @@ $(function () {
typeahead.$menu.remove()
})
test("should show menu in alternate location when query entered", function () {
var $input = $('<input />')
.appendTo('body')
.typeahead({
source: ['aa', 'ab', 'ac']
, align : 'right'
, position : 'above'
})
, typeahead = $input.data('typeahead')
$input.val('a')
typeahead.lookup()
ok(typeahead.$menu.is(":visible"), 'typeahead is visible')
equals(typeahead.$menu.find('li').length, 3, 'has 3 items in menu')
equals(typeahead.$menu.find('.active').length, 1, 'one item is active')
ok(typeahead.$menu.top < $input.top, 'typeahead is positioned above input')
$input.remove()
typeahead.$menu.remove()
})
test("should accept data source via synchronous function", function () {
var $input = $('<input />').typeahead({
source: function () {
js/bootstrap-typeahead.js
+ 5
- 2
  • View file @ 24ae6308


@@ -58,13 +58,14 @@
, show: function () {
var pos = $.extend({}, this.$element.position(), {
height: this.$element[0].offsetHeight
, width: this.$element[0].offsetWidth
})
this.$menu
.insertAfter(this.$element)
.css({
top: pos.top + pos.height
, left: pos.left
top: this.options.position === "above" ? pos.top - this.$menu.outerHeight(true) - 4 : pos.top + pos.height
, left: this.options.align === "right" ? pos.left + pos.width - this.$menu.outerWidth(true) : pos.left
})
.show()
@@ -309,6 +310,8 @@
, menu: '<ul class="typeahead dropdown-menu"></ul>'
, item: '<li><a href="#"></a></li>'
, minLength: 1
, align: 'left'
, position: 'below'
}
$.fn.typeahead.Constructor = Typeahead
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
3
docs no-backport-to-v4 v5
3
docs no-backport-to-v4 v5
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: twbs/bootstrap!29326
Source branch: github/fork/jstromergalley/3.0.0-wip

Menu

Explore Projects Groups Snippets