           @positionResultsArea()
 
     positionResultsArea: ->
-      # TODO make this detect screen edge; go up if at bottom
-      offset = @element.offset()
-      height = @element.outerHeight()
-      width = @element.outerWidth() - 2 # TODO make this more robust by detecting border widths and such
-      @queryResultArea.css top: offset.top + height, left: offset.left, width: width
+
+      # gather some info
+      inputOffset = @element.offset()
+      inputHeight = @element.outerHeight()
+      inputWidth = @element.outerWidth()
+      resultsHeight = @queryResultArea.outerHeight()
+      windowHeight = $(window).height()
+
+      # set the dimmensions and position
+      @queryResultArea.outerWidth inputWidth
+      @queryResultArea.css left: inputOffset.left
+
+      if inputOffset.top + inputHeight + resultsHeight > windowHeight
+        @queryResultArea.css top: inputOffset.top - resultsHeight
+      else
+        @queryResultArea.css top: inputOffset.top + inputHeight
+
+    getHighlightedChoice: ->
+      choice = @queryResultArea.find('li.choice.active')
+      if choice.length is 1
+        choice
+      else
+        null
 
     highlightNextChoice: ->
-      highlightedChoice = @queryResultArea.find('li.choice.active')
-      if highlightedChoice.length is 1
+      highlightedChoice = @getHighlightedChoice()
+      if highlightedChoice?
         nextChoice = highlightedChoice.next('li.choice')
         if nextChoice.length is 1
           highlightedChoice.removeClass 'active'
           nextChoice.addClass 'active'
 
     highlightPreviousChoice: ->
-      highlightedChoice = @queryResultArea.find('li.choice.active')
-      if highlightedChoice.length is 1
+      highlightedChoice = @getHighlightedChoice()
+      if highlightedChoice?
         previousChoice = highlightedChoice.prev('li.choice')
         if previousChoice.length is 1
           highlightedChoice.removeClass 'active'
           previousChoice.addClass 'active'
 
     selectHighlightedChoice: ->
-      highlightedChoice = @queryResultArea.find('li.choice.active')
-      if highlightedChoice.length is 1
+      highlightedChoice = @getHighlightedChoice()
+      if highlightedChoice?
         value = highlightedChoice.data 'value'
         @selectChoiceByValue value
         @_val = @element.val()

    # Note: values should be unique
    selectChoiceByValue: (value) ->
      if value? and value isnt ''
        matches = @choices.filter (choice) -> `choice.value == value`
        if matches[0]?
          @selectedChoice = matches[0]
        else

        self.selectChoiceByValue value
        self.hideResults()
        @_val = self.element.val()
        setTimeout -> # wait for mouseup event a focus to be lost
          self.element.focus()
        , 100

      @queryResultArea.on 'mouseenter', 'li.choice', ->
        highlightedChoice = self.queryResultArea.find('li.choice.active')
