假设我有一个包含 500 个姓名和手机号码的数组......例如 -
$ar=array("98738383839"=>"name1","4343243332233"=>"name2")
现在我想要做的是提供一个包含 4-5 个人的列表,其中包含单选按钮供用户选择 1 ......我可以从数组中开始 4-5 个人......现在我想给出一个搜索框,其中他们可以开始写名字,并且带有单选按钮的4-5个朋友的列表只会根据这个改变......
例如
假设我有一个包含 500 个姓名和手机号码的数组......例如 -
$ar=array("98738383839"=>"name1","4343243332233"=>"name2")
现在我想要做的是提供一个包含 4-5 个人的列表,其中包含单选按钮供用户选择 1 ......我可以从数组中开始 4-5 个人......现在我想给出一个搜索框,其中他们可以开始写名字,并且带有单选按钮的4-5个朋友的列表只会根据这个改变......
例如
我建议您查看 Angular,因为它比 jQuery 容易得多。我目前正在做一个有角度的项目,这就是我将如何处理它。
转到:http ://angularjs.org ,然后向下滚动并查看示例 3。搜索功能非常强大且易于实现。在 angular 中实现一个简单的类型,它将数组作为用户类型进行搜索。
对于带有单选按钮的框,它可以很容易地以角度完成,因为它允许双向数据绑定,这意味着如果你更改 JavaScript 变量中的值,它也会在 HTML 中更改。
对于您的文本框,请在 HTML 中包含类似的内容。这将寻找一个名为 itemLists 的数组(您需要在控制器中定义为 $scope.itemLists)。
<input type="text" ng-model="searchRecord" placeholder="Enter to search..." typeahead="itemList.item_id as itemList.name for itemList in itemLists | filter:$viewValue">
然后,您需要一个如下所示的 http 请求。PHP 文件将查询 mysql 并返回一组结果。
$http.get("someFile.php").success(function(response) {
if(response){# store results into itemLists array}
});
然后对于盒子,你可以使用 CSS + 或 bootstrap 来创建一些东西,让它看起来像你想要的样子。然后是图像、电子邮件和单选按钮。在上面的 html 示例代码中使用 ng-model 只是 HTML 输入文本框。
<input type="radio" ng-model="radioButton1">
<input type="radio" ng-model="radioButton2">
...
ng-model 是一个双向绑定变量,你可以从 HTML 和 JS 访问它。无论您在哪里更改该值,它都会立即更新。
希望它有所帮助,如果您需要更多信息,角度站点始终是一个不错的起点。