下面是如何使用jQuery Mobile创建一个搜索输入的完整攻略：
创建一个搜索输入的HTML结构
首先，我们需要创建一个含有搜索输入的HTML结构。一个基本的HTML结构应该如下：
<div data-role="page">
<div data-role="header">
<h1>Search Input Demo</h1>
</div>
<div data-role="content">
<form>
<label for="search-input">Search:</label>
<input type="search" name="search" id="search-input" value="">
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
可以看到，我们使用了jQuery Mobile的data-role定制标记，来使内容看起来更符合移动设备的标准。
添加搜索功能
通过上面的HTML结构，我们已经创建了一个简单的搜索输入，但是它并不能真正工作。下一步，就是添加搜索功能。
要添加搜索功能，需要使用jQuery Mobile提供的filterable插件。我们将它添加到页面的data-filter属性中，并为输入框添加data-type="search"属性即可。示例代码如下：
<!-- 添加了filterable插件和data-type属性 -->
<div data-role="page">
<div data-role="header">
<h1>Search Input Demo</h1>
</div>
<div data-role="content">
<form>
<label for="search-input">Search:</label>
<input type="search" name="search" id="search-input" value="" data-type="search">
<!-- 添加了data-filter属性 -->
<ul data-role="listview" data-filter="true" data-filter-reveal="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Kiwi</a></li>
</ul>
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
上述代码中，我们还添加了一个ul列表，用来展示搜索结果。
自定义搜索框样式
最后，我们可以通过CSS来自定义搜索框的样式。例如，将搜索框的背景颜色设置为灰色：
.ui-input-search {
background-color: #ccc;
}
至此，我们完成了使用jQuery Mobile创建一个搜索输入的攻略。
下面是两个示例：
示例 1：
首先，我们需要添加jQuery和jQuery Mobile的引用。代码如下：
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>
</head>
然后，我们在body中添加一个搜索输入的HTML结构，并对输入框和列表添加data-role和data-filter属性。代码如下：
<body>
<div data-role="page">
<div data-role="header">
<h1>Search Input Demo</h1>
</div>
<div data-role="content">
<form>
<label for="search-input">Search:</label>
<input type="search" name="search" id="search-input" value="" data-type="search">
<ul data-role="listview" data-filter="true" data-filter-reveal="true">
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Kiwi</a></li>
</ul>
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
最后，我们可以在CSS中自定义搜索框的样式。代码如下：
.ui-input-search {
background-color: #eee;
border: none;
border-radius: 5px;
margin: 10px;
padding: 5px;
}
示例 2：
在这个示例中，我们将使用基于ajax的动态搜索来实现搜索输入功能。
首先，我们需要添加jQuery和jQuery Mobile的引用。代码如下：
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>
</head>
然后，在body中添加一个搜索输入的HTML结构。代码如下：
<body>
<div data-role="page">
<div data-role="header">
<h1>Search Input with Ajax Demo</h1>
</div>
<div data-role="content">
<form>
<label for="search-input">Search:</label>
<input type="search" name="search" id="search-input" value="" data-type="search">
<ul data-role="listview" id="search-result" data-filter="true" data-filter-reveal="true">
</ul>
</form>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
注意，在这个示例中我们没有提供初始数据，而是在搜索时通过Ajax请求数据并动态更新列表。
最后，我们需要编写一段JavaScript代码，来实现基于Ajax的动态搜索功能。代码如下：
$(document).on('pagecreate', function() {
$('#search-input').on('change', function() {
var search = $(this).val().toLowerCase();
if (search.length > 2) { //长度超过2才开始搜索
$.ajax({
url: 'http://example.com/search',
method: 'GET',
data: {search: search},
dataType: 'json', //数据格式为JSON
success: function(data) {
$('#search-result').empty(); //清空搜索结果
$.each(data, function(index, item) {
$('#search-result').append('<li><a href="#">' + item.title + '</a></li>');
});
$('#search-result').listview('refresh'); //刷新列表
}
});
}
});
});
上述代码中，我们通过监听change事件来实现搜索输入功能。每次输入框内容变化时，会向指定的URL发起Ajax请求，并将搜索关键词作为请求参数传递。请求成功后，我们利用jQuery的each()方法遍历结果集，并将结果动态添加到列表中。
至此，我们完成了基于ajax的动态搜索输入的攻略。