Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.2k views
in Technique[技术] by (71.8m points)

jquery - Fixed positioned search box with Autocomplete suggestions

In my webapp I have a search box in a fixed toolbar on the top of webpage. I implemented the fixed position of toolbar like this....

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }

Now, I am implementing a keyword autocomplete function on it using a jQuery plugin.

My problem is how to keep the autocomplete suggestions fixed/attached to the search box when the window is scrolled/resized.

The css for autocomplete suggestions box is....

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}

I have a problem when I perform these operations..

  1. Type something in search box, causing the suggestions to appear
  2. With search box open, I scroll the window.
  3. This causes the autosuggestions box to be scrolled as well.

What can I do to solve this bug?

Here is how it looks.

alt text

The autocomplete have scrolled over the fixed positioned input box.

Update 1: I tried adding the position: fixed; to the autocomplete.

That gives problem in a different case.

  • Type something in search box, causing the suggestions to appear
  • Press escape, causing the box to disappear
  • Scroll down the window
  • Type something in search box, causing the suggestions to appear
  • Now the search box, appears at the position it appeared before scrolling since the position is fixed

Update:

alt text

Update 2:

The following code added to autocomplete css does the trick.

.ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
       position: fixed;
       top: 0px;
       margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

Regards

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Why not make the search results position: fixed as well? As long as you know the height of the textbox, you can position the results list such that it is always just under the textbox element.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...