Fatal编程技术网
  • javascript/
  • Javascript 如何将Ajax typeahead变量发送到新的PHP页面

Javascript 如何将Ajax typeahead变量发送到新的PHP页面

javascript php jquery ajax

Javascript 如何将Ajax typeahead变量发送到新的PHP页面,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,这个脚本现在运行得很好。如何使用bootstrap typeahead搜索mysql表的示例。我已经修改了最初的细节，因为它是苹果和橘子的混淆，但主要问题仍然适用。使用typeahead时，有不同的版本，因此您的代码必须与您使用的typeahead.js相匹配 搜索html.php <html> <head> <title>Typeahead Education</title> <script src="https://ajax.google

这个脚本现在运行得很好。如何使用bootstrap typeahead搜索mysql表的示例。我已经修改了最初的细节，因为它是苹果和橘子的混淆，但主要问题仍然适用。使用typeahead时，有不同的版本，因此您的代码必须与您使用的typeahead.js相匹配

搜索html.php

<html>
<head>
<title>Typeahead Education</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  

<script>
$(document).ready(function() {

    $('#my_input').typeahead({
        source: function(query, result) {
            $.ajax({
                url: "search_script.php",
                method: "POST",
                data: {
                    query: query
                },
                dataType: "json",
                success: function(data) {
                    result($.map(data, function(item) {
                        return item;

                    }));
                }

            })
        },
        updater: function(item) {
            location.href = 'page99.php?choice=' + item
            return item
        }
    });

  });

</script>

</head>

<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center"> Typeahead to show choices, then sends selected choice as a variable to a different php page</h2>
<h4 align="center"> For example type "th" or "sh"</h4>
<br /><br />
<label>Search my_input</label>

<input type="text"  id="my_input" class="form-control input-lg" autocomplete="off" placeholder="Type my_input choice" />

</div>

</body>

</html>


超前教育
$（文档）.ready（函数（）{
$（“#我的输入”）。请提前键入({
来源：函数（查询、结果）{
$.ajax({
url:“search_script.php”，
方法：“张贴”，
数据：{
查询：查询
},
数据类型：“json”，
成功：功能（数据）{
结果（$.map）（数据、函数（项）{
退货项目；
}));
}
})
},
更新程序：函数（项）{
location.href='page99.php？choice='+项目
退货项目
}
});
});



提前键入以显示选项，然后将所选选项作为变量发送到不同的php页面
例如，键入“th”或“sh”



搜索我的输入
search_script.php

<?php
$connect = mysqli_connect($servername, $username, $password, $dbname);
$request = mysqli_real_escape_string($connect, $_POST["query"]);
$query = " SELECT * FROM all_shops WHERE p_shop_name LIKE  
'%".$request."%'";

$result = mysqli_query($connect, $query);

$data = array();

if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$data[] = $row["p_shop_name"];
}
echo json_encode($data);

}
?>**strong text**

您只需通过GET参数将选择传递到另一个页面即可


$('#my_input').bind('typeahead:select', submitChoice);
function submitChoice(){
    location.href = 'other_page.php?choice='+$('#my_input').val()
}


收听
typeahead：在输入上选择
事件，然后让浏览器转到包含GET参数的页面url


$('#my_input').bind('typeahead:select', submitChoice);
function submitChoice(){
    location.href = 'other_page.php?choice='+$('#my_input').val()
}


该选项将被传递到other_page.php，并可在
$\u请求['choice']
或
$\u获取['choice']



对于引导型typeahead变体，您可以尝试以下方法：


$(document).ready(function() {

    $('#my_input').typeahead({
        source: function(query, result) {
            $.ajax({
                url: "search_script.php",
                method: "POST",
                data: {
                    query: query
                },
                dataType: "json",
                success: function(data) {
                    result($.map(data, function(item) {
                        return item;

                    }));
                }

            })
        },
        updater: function(item) {
            location.href = 'page99.php?choice=' + item
            return item
        }
    });

});



您有两个id为
my\u input
的元素。我删除了name=“my\u input”do differention，区别在于isI进行了上述更改，no go。我不确定在哪里将建议的更改集成到我的代码中。我甚至试着把它放在括号之间的不同位置。@RickyT啊，你似乎使用了不同版本的typeahead。您的不支持
select
事件。你能换成这个吗？好的，Manuel，我添加了typeahead.js并验证了scr链接的工作情况，正如您在上面修改的html脚本中看到的那样。我也换了一台不同的服务器，上传了上面的脚本。仍然没有工作。我假设当我点击显示的选项时，它会将我带到page99.php，对吗？如果是这样的话，我仍然缺少一些东西。只想点击选择而不点击按钮。所以，我不确定要使用什么源链接，所以我把它们都添加了。可以吗？