JavaWeb购物系统（十二）搜索联想词的添加

效果图

---

相关文章

---

前言

 这是购物系统的一个补充，因为在逛淘宝、京东等这些购物网站的，还有很多搜索网站搜索框的时候，都会有这个联想词。联想词可以提高用户的体验。我们这里使用的是淘宝的API接口，只是显示了它的json结果，不能点击跳转。
 添加这个功能的目的是：想让这个系统更加的像真正的购物网站（虽然很有难度， 虽不能至，心向往之。）下面我们正式来讲解：👇

前端

*📌html代码

 <%--联想词--%>
<nav class="navbar navbar-light bg-light" style="width: 500px">
     <div class="container-fluid">
         <form class="d-flex">
             <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="searchText">
             <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" style="margin-top: 38px;width: 200px"> ul>
             <button class="btn btn-outline-success" id="search">Searchbutton>
         form>
     div>
 nav>
1
2
3
4
5
6
7
8
9
10

📌javaScript代码

  // 联想词
 $("#searchText").on('input', function() {
       var kw = $("#searchText").val();
       var htmlAdd = '';
       $.ajax({
           url: "https://suggest.taobao.com/sug?k=1&area=c2c&q="+ kw +"&code=utf-8&ts=1668177833880",
           type: "get",
           success: function (data) {
               for (var i = 0;i<=data.result.length/2;i++){
                   htmlAdd += `
`+ data.result[i][0] +``
               }
               $('.dropdown-menu').html(htmlAdd)
               $('.dropdown-menu').show()
           },
           dataType: "jsonp"
       })
})

// 搜索框失去焦点
$("#searchText").blur(
    function () {
        $('.dropdown-menu').hide();
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 我们使用Jquery的方式来发送Ajax。需要注意的是这里虽然使用的是$.ajax()，但他不是真正的Ajax请求。因为Ajax请求响应回来的数据，是不支持跨域访问的（我们访问的是淘宝的API的接口），这里实际上是使用jsonp格式的数据。它的原理是