获取input id为search里面的文字

你可以通过以下JavaScript代码获取id为search的input元素中的文字：

var searchInput = document.getElementById("search");
var searchText = searchInput.value;

第一行代码通过getElementById方法获取id为search的input元素。

第二行代码获取input元素中的值，并将其赋值给searchText变量。

注意：该代码需要在页面加载完成后执行，否则可能无法获取到对应的元素。

相关问题

django input输入框输入文字时，在输入框下面弹出相匹配数据的列表框 实现的代码示例

以下是一个简单的实现示例：

在 Django 的视图函数中，可以使用 Ajax 技术实现输入框下面弹出相匹配数据的列表框。具体步骤如下：

1. 在前端页面中，使用 jQuery 监听输入框的 keyup 事件，获取输入框中的文本内容，并将其发送到后端视图函数中。

$(document).ready(function() {
    $('#input-box').keyup(function() {
        var input_text = $(this).val();
        $.ajax({
            url: '/search/',
            type: 'POST',
            data: {'input_text': input_text},
            success: function(data) {
                // 处理返回的数据
            }
        });
    });
});

2. 在后端视图函数中，接收前端发送的数据，并根据输入的文本内容查询数据库中的匹配数据，将查询结果返回给前端。

from django.http import JsonResponse
from myapp.models import MyModel

def search(request):
    if request.method == 'POST':
        input_text = request.POST.get('input_text')
        results = MyModel.objects.filter(name__contains=input_text)
        data = [{'id': r.id, 'name': r.name} for r in results]
        return JsonResponse({'data': data})

3. 在前端页面中，处理后端返回的数据，将匹配结果显示在列表框中。

success: function(data) {
    var results = data['data'];
    var list_html = '';
    for (var i = 0; i < results.length; i++) {
        list_html += '<li data-id="' + results[i].id + '">' + results[i].name + '</li>';
    }
    $('#list-box').html(list_html);
}

其中，`#input-box` 是输入框的 ID，`#list-box` 是列表框的 ID，`MyModel` 是数据库中的模型类，`name` 是模型类中的一个字段。

<div id="tab3" class="weui-tab__bd-item"> <!----搜索框---> <div class="weui-search-bar weui-search-bar_focusing" id="searchBar"> <form class="weui-search-bar__form"> <div class="weui-search-bar__box"> <i class="weui-icon-search"></i> <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required=""> <a href="javascript:" class="weui-icon-clear" id="searchClear"></a> </div> <label class="weui-search-bar__label" id="searchText"> <i class="weui-icon-search"></i> <span>搜索</span> </label> </form> <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a> </div>根据代码，用jquey写下拉刷新效果

下面是使用 jQuery 实现下拉刷新的代码示例：

HTML 结构：

<div id="tab3" class="weui-tab__bd-item">
  <!-- 搜索框 -->
  <div class="weui-search-bar weui-search-bar_focusing" id="searchBar">
    <form class="weui-search-bar__form">
      <div class="weui-search-bar__box">
        <i class="weui-icon-search"></i>
        <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
      </div>
      <label class="weui-search-bar__label" id="searchText">
        <i class="weui-icon-search"></i>
        <span>搜索</span>
      </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>

  <!-- 下拉刷新 -->
  <div class="pull-to-refresh-content">
    <div class="pull-to-refresh-layer">
      <div class="preloader"></div>
      <div class="pull-to-refresh-arrow"></div>
    </div>
    <!-- 列表内容 -->
    <ul class="list"></ul>
  </div>
</div>

CSS 样式：

/* 下拉刷新 */
.pull-to-refresh-content {
  position: relative;
  overflow: auto;
}

.pull-to-refresh-layer {
  position: absolute;
  top: -40px;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #999;
  font-size: 14px;
}

.pull-to-refresh-arrow {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 10px;
  height: 10px;
  border: 1px solid #999;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

.pull-to-refresh-layer .preloader {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

/* 列表 */
.list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

JavaScript 代码：

$(function() {
  // 获取下拉刷新区域和列表区域
  var $ptrContent = $('.pull-to-refresh-content');
  var $list = $('.list');

  // 初始化下拉刷新
  $ptrContent.on('ptr:refresh', function(e) {
    // 模拟 AJAX 请求
    setTimeout(function() {
      // 生成新的列表项
      var newItem = '<li>新的列表项</li>';

      // 将新的列表项插入到列表中
      $list.prepend(newItem);

      // 结束下拉刷新
      $.pullToRefreshDone($ptrContent);
    }, 2000);
  });

  // 初始化下拉刷新插件
  $ptrContent.ptr({
    // 修改默认的下拉刷新文字
    pullText: '下拉刷新',
    releaseText: '释放刷新',
    refreshText: '正在刷新...',
    // 修改默认的下拉刷新图标
    iconArrow: '<div class="pull-to-refresh-arrow"></div>',
    iconRefreshing: '<div class="preloader"></div>',
    // 修改默认的下拉刷新触发距离
    distance: 50
  });
});

注意：上面的代码使用了第三方的下拉刷新插件 `pull-to-refresh-js`，需要先引入该插件。