首页 > 其他分享 >jQuery练习4京东商品详情页面(搜索框功能)

jQuery练习4京东商品详情页面(搜索框功能)

时间:2023-01-22 17:55:25浏览次数:74  
标签:jQuery function search 智能 焦点 value 输入框 京东 页面

视频

获取焦点并且输入后显示,失去焦点隐藏。

事件回调函数的this是dom元素,和如何添加监听没有关系。

//3. 输入搜索关键字, 列表显示匹配的结果
function search() {
  // 1.写入数据的时候,出现智能提示
  // 2.失去焦点的时候,隐藏智能提示
  // 3.当输入框中有数据的时候,获得焦点 出现智能提示,
  // 4.当输入框中没有数据的时候,获得焦点 不出现智能提示

  $('#txtSearch')
    .on('keyup focus', function () {
      //如果输入框有文本才显示列表
      var value = this.value.trim()//去空格
      if (value){
        $('#search_helper').show()
      }
    })
    .blur(function () {
      //隐藏列表
      $('#search_helper').hide()
    })
}

标签:jQuery,function,search,智能,焦点,value,输入框,京东,页面
From: https://www.cnblogs.com/chuixulvcao/p/17064541.html

相关文章