-3

假设我有一个包含 500 个姓名和手机号码的数组......例如 -

$ar=array("98738383839"=>"name1","4343243332233"=>"name2")

现在我想要做的是提供一个包含 4-5 个人的列表,其中包含单选按钮供用户选择 1 ......我可以从数组中开始 4-5 个人......现在我想给出一个搜索框,其中他们可以开始写名字,并且带有单选按钮的4-5个朋友的列表只会根据这个改变......

例如

在此处输入图像描述

4

1 回答 1

2

我建议您查看 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 访问它。无论您在哪里更改该值,它都会立即更新。

希望它有所帮助,如果您需要更多信息,角度站点始终是一个不错的起点。

于 2013-08-01T12:31:19.707 回答