如何使用jQuery Mobile创建一个搜索输入

创建一个搜索输入在jQuery Mobile中非常简单。首先，我们需要遵循以下步骤：

步骤一：创建HTML结构

使用jQuery Mobile时，我们需要使用其专有的HTML结构。在这个例子中，我们需要添加一个输入框和一个按钮，并将它们包裹在一个页面容器中：

<div data-role="page">
  <div data-role="content">
    <form>
      <div class="ui-field-contain">
        <label for="search">搜索:</label>
        <input type="text" name="search" id="search">
        <button type="submit" id="submit">搜索</button>
      </div>
    </form>
  </div>
</div>

注意我们使用了data-role属性和class来定义页面容器和表单元素。我们还为输入框添加了id属性以便稍后进行JavaScript操作。

步骤二：添加JavaScript

接下来，我们需要添加一些JavaScript代码来处理搜索功能。使用jQuery Mobile时，我们需要确保代码位于页面容器之后，这样它们可以正确地加载。

在这个例子中，我们将使用jQuery的ajax函数来获取搜索结果。当用户点击“搜索”按钮时，我们会阻止表单的默认提交行为，然后发起ajax请求。请求完成后，我们将搜索结果呈现在页面上：

<script>
  // 等待DOM加载完成后开始
  $(document).on('pagecreate', function() {

    // 阻止表单的默认提交行为
    $('form').on('submit', function(event) {
      event.preventDefault();

      // 发起ajax请求
      $.ajax({
        url: 'https://api.example.com/search?q=' + $('#search').val(),
        success: function(data) {

          // 根据搜索结果创建HTML元素
          var resultHtml = '';
          $.each(data, function(index, result) {
            resultHtml += '<li><a href="' + result.url + '">' + result.title + '</a></li>';
          });

          // 将搜索结果呈现在页面上
          $('#search-results').html(resultHtml).listview('refresh');
        }
      });

      // 清空搜索框
      $('#search').val('');
    });
  });
</script>

我们首先等待DOM完成加载，接着为表单添加一个submit事件监听函数。在事件处理程序中，我们阻止表单的默认行为并发起ajax请求。成功返回后，我们使用jQuery的$.each函数遍历搜索结果，并用HTML格式化它们。最后，我们将结果呈现在页面的#search-results列表中。

示例1：基本的搜索输入

以下是一个基本的搜索输入示例，其中我们只有一个搜索框和一个搜索按钮：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>搜索输入示例</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="content">
    <form>
      <div class="ui-field-contain">
        <label for="search">搜索:</label>
        <input type="text" name="search" id="search">
        <button type="submit" id="submit">搜索</button>
      </div>
    </form>
    <ul data-role="listview" id="search-results"></ul>
  </div>
</div>

<script>
  // 等待DOM加载完成后开始
  $(document).on('pagecreate', function() {

    // 阻止表单的默认提交行为
    $('form').on('submit', function(event) {
      event.preventDefault();

      // 发起ajax请求
      $.ajax({
        url: 'https://api.example.com/search?q=' + $('#search').val(),
        success: function(data) {

          // 根据搜索结果创建HTML元素
          var resultHtml = '';
          $.each(data, function(index, result) {
            resultHtml += '<li><a href="' + result.url + '">' + result.title + '</a></li>';
          });

          // 将搜索结果呈现在页面上
          $('#search-results').html(resultHtml).listview('refresh');
        }
      });

      // 清空搜索框
      $('#search').val('');
    });
  });
</script>

</body>
</html>

示例2：自动完成搜索

如果您想要提供更加完整和快速的搜索体验，那么可以使用自动完成搜索。以下是一个带有自动完成搜索的搜索输入示例，它会在用户每输入一个字符时自动查询后台API并呈现搜索结果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>搜索输入示例</title>
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="content">
    <form>
      <div class="ui-field-contain">
        <label for="search">搜索:</label>
        <input type="text" name="search" id="search" data-type="search">
      </div>
    </form>
    <ul data-role="listview" id="search-results"></ul>
  </div>
</div>

<script>
  // 等待DOM加载完成后开始
  $(document).on('pagecreate', function() {

    // 监听搜索框键盘输入事件
    $('#search').on('keyup', function() {
      var searchValue = $('#search').val();

      // 发起ajax请求
      $.ajax({
        url: 'https://api.example.com/search?q=' + searchValue,
        success: function(data) {

          // 根据搜索结果创建HTML元素
          var resultHtml = '';
          $.each(data, function(index, result) {
            resultHtml += '<li><a href="' + result.url + '">' + result.title + '</a></li>';
          });

          // 将搜索结果呈现在页面上
          $('#search-results').html(resultHtml).listview('refresh');
        }
      });
    });
  });
</script>

</body>
</html>

在这个例子中，我们首先将搜索框的type属性设置为“search”，这样jQuery Mobile会自动为我们添加一个清空按钮。我们接下来监听搜索框的keyup事件，并发起ajax请求。我们不再需要提交按钮，因为我们会在输入的每一个字符发生变化时进行搜索。最后，我们将搜索结果呈现在页面的#search-results列表中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个搜索输入 - Python技术站

如何使用jQuery Mobile创建一个搜索输入

步骤一：创建HTML结构

步骤二：添加JavaScript

示例1：基本的搜索输入

示例2：自动完成搜索

相关文章