Requirements:

According to the search content to achieve full text retrieval, support to view the search results on the next one, the page will automatically scroll to the specified location. As shown in figure:

The requirements sound simple, but there are some ios potholes. Here’s a summary:

  • Search box top location.
  • Input Long press to scroll the page.
  • Js set enter text (search)

1. Search for the top

Solution 1: Fixed absolute positioning. The pit I encountered was that the entire positioning of the input would slide up and down when obtaining the cursor, and there would be a temporary positioning failure when scrolling the page after the search. I looked up the documents, but there was no good solution. So I switched to plan two.

Solution 2: Absolute + Dynamic height.

  • First set the search content as, use JS to calculate the screen height according to the height of the page, and then set the dynamic height for the content (main) module. After setting, there will be no smooth scrolling and the whole page after the search enter moves up. Don’t panic, then solve these two problems
  • Scrolling is not smooth. I use overflow: scroll; -webkit-overflow-scrolling: touch; Solve, baidu can come out.
  • I used the trick of adding a blur() event to the input directly within the carriage return event so that the page would not move up. Here our first search ceiling problem is solved 😝.

2. Page scrolling occurs when input is pasted by long press

What I do is remember the current scroll position of the page and add scroll to this position in the input event to get the cursor. The code is as follows:

$("html, body .info").animate({
   scrollTop: old_scroll_top + "px"
 }, 0);
Copy the code

3. Set js to Enter text (search)

You have to add the FROM form to do this. The code is as follows:

<form action="#" class="search-left" onsubmit="return false;">
  <input id="search" type="search" class="search-inp" value="" placeholder="Search"/>
  <span class="results">1/75</span>
  <img class="clear-inp" alt="" src="img/close.png" />
</form>
Copy the code

Fill the pit here 👻👻👻.

Next talk about how to achieve full text retrieval

Very simple, is to use a selector method contains, please use your own baidu. Then the re search, text replacement is done perfectly.

conclusion

I simply described the problems I encountered and how I solved them. If have better welcome to discuss. Or do not understand the welcome to ask 😋.