jquery query stretch box

JQuery is a simple and easy-to-use JavaScript library. It encapsulates many common JavaScript operations and provides a simple way to manipulate HTML documents and DOM elements. In this article, we will introduce readers to how to use JQuery to create a query stretch box.

The query stretch box is a common component in web applications that allows users to enter query conditions and return results. It usually includes a text box and an optional "Search" button. When users enter query conditions, the stretch box automatically filters the results based on the input conditions, helping users find what they need faster.

To use JQuery to create a query stretch box, we need the following steps:

1. Create a stretch box element in the HTML document.

We can use the basic elements of HTML to create stretch boxes. Typically, a stretch box includes an input box and a search button. The input box is used to enter query conditions, and the search button is used to trigger the search operation.

The following is a simple HTML code for creating a query stretch box:

<div class="search-container">
  <input type="text" placeholder="输入搜索关键字...">
  <button class="search-button">搜索</button>
</div>

In this example, we create a DIV element with the class name "search-container" , which contains an input box of type "text" and a search button with a class name of "search-button". The "placeholder" attribute in the input box provides a default text for the input box to help the user understand what it should enter.

2. Add JQuery library to the page

To use the JQuery library, we need to add a link to the JQuery library at the head or foot of the page. Below is a simple link to add the JQuery library to the HTML page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

When we use this link to add the JQuery library to the HTML document, we can use all the features of JQuery to manipulate the document element.

3. Write JQuery code to implement the query function

Once we have created the stretch box element in the page and added the JQuery library, we can start writing JQuery code to The function of stretching frame is realized. We will write the following code to filter the elements by the text entered in the input box and display the results on the page.

$(document).ready(function(){
    $('.search-button').click(function(){
        var searchText = $('.search-container input').val();
        $('.search-list li').each(function(){
            if($(this).text().toUpperCase().indexOf(searchText.toUpperCase()) == -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

The above JQuery code uses the following steps:

1. We use the .ready() function to wrap the code in a function that is executed only when the page is ready.
2. We use the .click() function to wrap the code in a function that is executed when the search button is clicked.
3. We first get the query conditions entered by the user, which are stored in the value of the search box.
4. We use the .each() function to traverse the element list containing the results (the element list here takes an unordered list with the class name "search-list" as an example).
5. Execute a function on each element that displays the element if the query criteria matches the text of any element, otherwise hides it.

When the user clicks the search button, the JQuery code will check each element in the list and hide them if they do not contain the query criteria. If they contain query criteria, they will remain visible.

4. CSS Styling

Finally, to make the query stretch box look like a set of separate elements, we need to add some CSS styling. Here is a simple CSS style to apply the style of the search box and search button to all query stretch boxes on the page:

.search-container {
  display: flex;
  align-items: center;
}

.search-container input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search-container button {
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #388e3c;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #388e3c;
}

In the above CSS style, we are under the .search-container class Defines some styles that are applied to the DIV element containing the search box and search button. We also defined specific styles for the input box and search button to make them look more beautiful.

Conclusion

In this article, we introduced readers to how to use JQuery to create a query stretch box. We achieved this goal in four steps: creating HTML elements, adding the JQuery library, writing JQuery code, and adding CSS styles. JQuery not only makes it easier to create query stretch boxes, but also makes web applications more user-friendly and easier to use.

The above is the detailed content of jquery query stretch box. For more information, please follow other related articles on the PHP Chinese website!