thinkphp5,根据第一个输入框的值做动态下拉
时间: 2024-10-07 09:04:15 浏览: 29
thinkphp5使html5实现动态跳转的例子
在ThinkPHP5中,根据第一个输入框的值动态生成下拉列表,可以使用Ajax配合后台的逻辑。以下是大致步骤:
1. **HTML部分**:
创建一个输入框和一个下拉列表:
```html
<input type="text" id="searchInput" placeholder="搜索...">
<div id="dynamicDropdown"></div>
```
2. **JavaScript (AJAX)**:
当用户输入发生变化时,触发一个事件,发送Ajax请求到后端API:
```javascript
$('#searchInput').on('keyup', function() {
var val = $(this).val();
$.ajax({
url: '/api/search', // 替换为实际的URL
type: 'GET',
data: { keyword: val },
success: function(data) {
populateDropdown(data);
}
});
});
function populateDropdown(result) {
$('#dynamicDropdown').empty(); // 清空之前的内容
result.forEach(item => {
$('#dynamicDropdown').append('<option value="' + item.id + '">' + item.name + '</option>');
});
}
```
3. **ThinkPHP5 后台处理**:
创建一个控制器(如`Api.php`)并编写处理函数:
```php
namespace app\Api;
class Controller extends BaseController
{
public function search()
{
$keyword = input('keyword'); // 获取前端传递过来的关键词
$result = Db::name('a')->where('name like ?', '%'.$keyword.'%')->field('id, name')->select();
return json_encode($result); // 返回json格式数据
}
}
```
4. **注意**:
- `input()` 函数用于从前端获取数据,`like` 是模糊匹配,可以根据需求调整搜索条件。
- 返回的数据应该是符合前端预期的格式,这里假设是包含`id`和`name`的数组。
阅读全文