Javascript 使用jQueryUIAutoComplete在MVC中搜索JSON输出

我正在尝试使用jQueryUIAutoComplete小部件搜索我的用户表。 我要搜索的“我的用户”表中的两个字段：

景色

模型

输出

注意：未定义索引：term [user1，user1@email.com，user2，user2@email.com]

所以我可以在站点上输出JSON，但是我不能用autocomplete小部件搜索它！ 有人能帮我吗？ 我没有使用任何类型的框架或cms。

---

我会很高兴得到任何帮助

首先将autocomplete=设置为您的输入字段，即

<input type="search" id="searchFriends" placeholder="find friends" autocomplete="on"/>

---

并将其保存在$document.readyfunction{….}

首先将autocomplete=设置为您的输入字段，即

<input type="search" id="searchFriends" placeholder="find friends" autocomplete="on"/>

$(document).ready(function(){
var data=[];

    $.ajax({
        url: "/friend/showFriends", //the function in the controller
        dataType: "json",
        success: function(response){
            $.each(response, function(i,val){
            data.push(""+val.friend_usernames+"");
        });

        },
      });


$("#searchFriends").focus(function(){

             $("#searchFriends").autocomplete({
                        autoFocus: true,
                        source:data,
                        minLength: 3, //search after two characters
                        select: function(event, ui){
                            //do something
                            //autofocus:true
                            },
                         autoFocus: true,
                        mustMatch: true,
                        html: false,
                        open: function(event, ui) {
                        $(".ui-autocomplete").css("z-index",2000);
                            }

                        });

        }).change(function() {
        if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
            if($('.ui-autocomplete').length) {
                //$("#searchFriends").val('');
            }
        }
    });
});

并将其保存在$document.readyfunction{….}

$(document).ready(function(){
var data=[];

    $.ajax({
        url: "/friend/showFriends", //the function in the controller
        dataType: "json",
        success: function(response){
            $.each(response, function(i,val){
            data.push(""+val.friend_usernames+"");
        });

        },
      });


$("#searchFriends").focus(function(){

             $("#searchFriends").autocomplete({
                        autoFocus: true,
                        source:data,
                        minLength: 3, //search after two characters
                        select: function(event, ui){
                            //do something
                            //autofocus:true
                            },
                         autoFocus: true,
                        mustMatch: true,
                        html: false,
                        open: function(event, ui) {
                        $(".ui-autocomplete").css("z-index",2000);
                            }

                        });

        }).change(function() {
        if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
            if($('.ui-autocomplete').length) {
                //$("#searchFriends").val('');
            }
        }
    });
});

和HTML

<input type="search" id="searchFriends" placeholder="find friends" autocomplete="on"/>

这就是我所能做的。这对我来说很好，不过对于其他数据库，请确保您从AJAX调用中正确获取json，并且您有jquery自动完成插件和jquery-ui-custom.x.x.js以及jquery自动完成css插件

和HTML

<input type="search" id="searchFriends" placeholder="find friends" autocomplete="on"/>

---

这就是我能做的。这对我来说很好，但对其他数据库来说，确保您从AJAX调用中正确获取json，并且您有jquery-autocomplete插件和jquery-ui-custom.x.x.x.js以及jquery-auto-complete css插件。

我彻底检查了您的问题并最终解决了它。主要问题是您的json格式没有正确提交。它应该采用这种格式才能正常工作-

[
    {
        "user_name": "user1",
        "user_email": "user1@email.com"
    },
    {
        "user_name": "user2",
        "user_email": "user2@email.com"
    }
]

不知何故，我是在PHP的帮助下生成json的，而不是通过数据库，不管是什么，它都是通过AJAX通过“url”部分生成的

为了通过php进行检查，我给出了测试代码--

data.php

<?php 
$friend=array(
        array("user_name"=>"user1","user_email"=>"user1@email.com"),
        array("user_name"=>"user2","user_email"=>"user2@email.com")
        );

        echo json_encode($friend);

?>

完整的html和javascript代码是

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var data=[];

    $.ajax({
        url: "data.php", //the function in the controller
        dataType: "json",
        success: function(response){
            //console.log(response);
            $.each(response, function(i,val){
            data.push(""+val.user_name+"");//to display names in auto-complete
            data.push(""+val.user_email+"");//to display emails in auto-complete
        });

        },
      });


$("#searchFriends").focus(function(){
             $("#searchFriends").autocomplete({
                        autoFocus: true,
                        source:data,
                        minLength: 1, 
                        select: function(event, ui){
                            //do something
                            //autofocus:true
                            },
                         autoFocus: true,
                        mustMatch: true,
                        html: false,
                        open: function(event, ui) {
                        $(".ui-autocomplete").css("z-index",2000);
                            }

                        });

        }).change(function() {
        if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
            if($('.ui-autocomplete').length) {
                //$("#searchFriends").val('');
            }
        }
    });
});
</script>
</head>
<body>
<div class="col-md-3">
    <input type="search" id="searchFriends" class="form-control" placeholder="find friends" autocomplete="on"/>
</div>
</body>
</html>

就这样，它工作正常。 要测试它-

1> 创建一个“index.html”文件，并将html和javascript代码复制到其中，所有链接都来自cdn，您只需要互联网连接

2> 创建一个“data.php”文件，将php代码复制到其中，并将该文件与“index.html”保存在同一文件夹中。测试不需要数据库

3> 运行它

注意。**要获得数据库的结果，您需要将传入的json格式设置为我上面给出的格式

---

我希望最终完成。谢谢。

我彻底检查了您的问题并最终解决了它。主要问题是您的json格式没有正确提交。它应该以这种格式来正常工作-

[
    {
        "user_name": "user1",
        "user_email": "user1@email.com"
    },
    {
        "user_name": "user2",
        "user_email": "user2@email.com"
    }
]

不知何故，我是在PHP的帮助下生成json的，而不是通过数据库，不管是什么，它都是通过AJAX通过“url”部分生成的

为了通过php进行检查，我给出了测试代码--

data.php

<?php 
$friend=array(
        array("user_name"=>"user1","user_email"=>"user1@email.com"),
        array("user_name"=>"user2","user_email"=>"user2@email.com")
        );

        echo json_encode($friend);

?>

完整的html和javascript代码是

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var data=[];

    $.ajax({
        url: "data.php", //the function in the controller
        dataType: "json",
        success: function(response){
            //console.log(response);
            $.each(response, function(i,val){
            data.push(""+val.user_name+"");//to display names in auto-complete
            data.push(""+val.user_email+"");//to display emails in auto-complete
        });

        },
      });


$("#searchFriends").focus(function(){
             $("#searchFriends").autocomplete({
                        autoFocus: true,
                        source:data,
                        minLength: 1, 
                        select: function(event, ui){
                            //do something
                            //autofocus:true
                            },
                         autoFocus: true,
                        mustMatch: true,
                        html: false,
                        open: function(event, ui) {
                        $(".ui-autocomplete").css("z-index",2000);
                            }

                        });

        }).change(function() {
        if($('#searchFriends').val() != $('#searchFriends').data('selected-item')) {
            if($('.ui-autocomplete').length) {
                //$("#searchFriends").val('');
            }
        }
    });
});
</script>
</head>
<body>
<div class="col-md-3">
    <input type="search" id="searchFriends" class="form-control" placeholder="find friends" autocomplete="on"/>
</div>
</body>
</html>

就这样，它工作正常。 要测试它-

1> 创建一个“index.html”文件，并将html和javascript代码复制到其中，所有链接都来自cdn，您只需要互联网连接

2> 创建一个“data.php”文件，将php代码复制到其中，并将该文件与“index.html”保存在同一文件夹中。测试不需要数据库

3> 运行它

注意。**要获得数据库的结果，您需要将传入的json格式设置为我上面给出的格式

---

我希望最终完成。谢谢。

也许你应该返回你的json\u encode$friend\u用户名而不是echo。如果这不起作用，请尝试硬编码一个Javascript数组，以确保autocomplete能够自己工作。非常感谢您的回答！返回而不是回声没有帮助。我现在就试试你的第二个建议。自动完成功能本身正在发挥作用。我觉得这部分就是问题所在：var data=$response.mapfunction{return{value:this.friend\u usernames}；也许你应该返回你的json_encode$friend_用户名，而不是echo。如果这不起作用，请尝试硬编码Javascript数组，以确保autocomplete在自己身上工作。非常感谢你的回答！返回而不是echo没有帮助。我现在将尝试你的第二个建议。autocomplete本身正在工作。我有这种感觉这部分就是问题所在：var data=$response.mapfunction{return{value:this.friend\u usernames}；谢谢你的回答！不幸的是，它仍然不起作用。我也不知道它将在哪里调用控制器函数？源代码设置为数据，或者它是如何工作的？你的回答帮助了我很多！如果你能帮助我克服这最后的障碍，我将不胜感激！你加载了jquery自动完成插件并将代码保存在$d中了吗Occument.readyfunction{….}；？我只更改了自动完成函数，其余与您所做的相同，我再次发布完整的javascript。感谢您的回答！不幸的是，它仍然不起作用。我也不知道它将在何处调用控制器函数？源设置为数据或如何工作

---

你的回答对我帮助很大！如果你能帮助我跨越这最后一关，我将不胜感激！您是否已加载jquery自动完成插件并将代码保存在$document.readyfunction{….}；中？我只改变了自动完成功能，其余的和你做的一样，我再次发布完整的javascript。谢谢！！我不明白你的密码。我用它代替了我的。这就是为什么它对我没有任何意义。现在，它更有意义了。不幸的是，仍然不能解决我的问题。谢谢你的努力！非常感谢。我不明白你的密码。我用它代替了我的。这就是为什么它对我没有任何意义。现在，它更有意义了。不幸的是，仍然不能解决我的问题。谢谢你的努力！伟大的非常感谢你！！在测试中，它正在工作！在我的项目中还没有。但是你对我的json格式的看法是对的，所以我很确定一旦我找到了正确的格式，它也会在我的项目中起作用！最后我知道了问题所在，现在我知道该研究什么了！非常感谢你！伟大的非常感谢你！！在测试中，它正在工作！在我的项目中还没有。但是你对我的json格式的看法是对的，所以我很确定一旦我找到了正确的格式，它也会在我的项目中起作用！最后我知道了问题所在，现在我知道该研究什么了！非常感谢你！