我有一个Ajax PHP MySQL实时搜索，它基本上从MySQL数据库中提取食物并将它们显示在下拉列表中，因为用户输入搜索词，每行一项，就像在Google中搜索一样。
我需要的是一种允许用户点击特定结果项目的方法，并且为了打开它，在单击的项目下方，一个带有几个单选按钮的框，列出具有不同数量的特定食物项目的选项。然后，用户可以选择金额选项，然后单击“提交”以保存其选择。
我非常了解PHP，MySQL和HTML，但JS有点挑战，所以如果你能在答案中详细说明，我会很感激。
以下是我现在所拥有的一些代码片段：
HTML搜索表单：
<input type="text" size="30" name="food_name" id="q" value="" onkeyup="sendRequest(this.value);" autocomplete="off"/>
同一页面上的AJAX代码w / search form：
function createRequestObject() {
var req;
if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Problem creating the XMLHttpRequest object');
}
return req;
}
// Make the XMLHttpRequest object
var http = createRequestObject();
function sendRequest(q) {
// Open PHP script for requests
http.open('get', 'checkfoods.php?q='+q);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 && http.status == 200){
// Text returned FROM the PHP script
var response = http.responseText;
if(response) {
// UPDATE ajaxTest content
document.getElementById("searchResults").innerHTML = response;
}
}
}
查看名为FOOD_DES的表到MySQL中的PHP脚本，并返回填充下拉菜单列表的结果：
include 'my-food-dtabase.php';
$searchQry = isset($_GET['q']) ? mysql_real_escape_string($_GET['q']) : false;
if ($searchQry) {
$searchString = $_GET['q'];
$sql = mysql_query("SELECT NDB_No, FdGrp_Cd, Long_Desc FROM FOOD_DES WHERE Long_Desc LIKE '%".$_GET['q']."%' ORDER BY Long_Desc ASC");
if($searchString != NULL) {
while($row = mysql_fetch_assoc($sql)) {
echo "<span id=foodlist><a href=calorie-counter-serving.php?NDB_No=".$row['NDB_No'].">".$row['Long_Desc']."</a><br /></span>";
}
}
if(mysql_num_rows($sql) == 0) {
echo "<span class=medium_white>Food item not found. Try a different name or keyword.</span>";
}
}
答案 0 :(得分：3)
这不一定是一个完整的答案，而是指向正确方向的指针。
通过使用jQuery而不是纯JavaScript，您将节省大量的时间和精力。它还会将第2步减少到几行代码，因为它带有自己的Ajax API。这是一个tutorial on its Ajax system - 更容易！
jQuery UI是jQuery的一个很好的扩展，它可以帮助您构建用户界面，其中一部分是对话框小部件。我认为'Modal form' dialog example与您在单击“创建新用户”按钮时尝试实现的非常相似。点击“查看来源”查看他们是如何做到的。
同样从我在步骤3中看到的你没有清理你的查询，$ _GET ['q']被抛入你的查询字符串。你应该用$ searchQry替换它，你已经定义了几行。
答案 1 :(得分：0)
http://koding.info/2013/07/ajax-search-box-php-mysql-jquery/ 我已经实现了一个使用Wordpress数据库的演示实时搜索应用程序。 看一看。 它可能对你有所帮助。
答案 2 :(得分：0)
您可以使用Ajax，PHP和JQuery执行此操作。希望这有助于或帮助您开始。
在此处查看实时演示和源代码。
http://purpledesign.in/blog/to-create-a-live-search-like-google/
创建一个搜索框，可能是这样的输入字段。
<input type="text" id="search" autocomplete="off">
现在我们需要听取文本区域中用户类型的内容。为此，我们将使用jquery live（）和keyup事件。在每个keyup上我们都有一个运行php脚本的jquery函数“search”。
假设我们有这样的html。我们有一个输入字段和一个列表来显示结果。
<div class="icon"></div>
<input type="text" id="search" autocomplete="off">
<ul id="results"></ul>
我们有一个Jquery脚本，它将监听输入字段上的keyup事件，如果它不为空，它将调用search（）函数。 search（）函数将运行php脚本并使用AJAX在同一页面上显示结果。
这是JQuery。
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#search').focus();
});
//Listen for the event
$("input#search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search_st.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
});
在php中，向mysql数据库发送一个查询。 php将返回将使用AJAX放入html的结果。这里的结果放在一个html列表中。
假设有一个虚拟数据库，其中包含两个动物和鸟类表，两个相似的列名称为“type”和“desc”。
//search.php
// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";
// Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
// Check Connection
if ($tutorial_db->connect_errno) {
printf("Connect failed: %s\n", $tutorial_db->connect_error);
exit();
$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);
// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
// Build Query
$query = "SELECT *
FROM animals
WHERE type LIKE '%".$search_string."%'
UNION ALL SELECT *
FROM birf
WHERE type LIKE '%".$search_string."%'"
;
$result = $tutorial_db->query($query);
while($results = $result->fetch_array()) {
$result_array[] = $results;
}
// Check If We Have Results
if (isset($result_array)) {
foreach ($result_array as $result) {
// Format Output Strings And Hightlight Matches
$display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
$display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
$display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';
// Insert Name
$output = str_replace('nameString', $display_name, $html);
// Insert Description
$output = str_replace('functionString', $display_function, $output);
// Insert URL
$output = str_replace('urlString', $display_url, $output);
// Output
echo($output);
}
}else{
// Format No Results Output
$output = str_replace('urlString', 'javascript:void(0);', $html);
$output = str_replace('nameString', '<b>No Results Found.</b>', $output);
$output = str_replace('functionString', 'Sorry :(', $output);
// Output
echo($output);
}
}