我正在使用 php/mysql 创建自己的食谱框，而我坚持的一部分实际上是创建食谱，特别是选择成分。
我想做的是有一个自动完成的搜索框，我可以在其中输入成分的名称，将结果下拉到正下方，然后单击我要查找的那些。点击成分后，它会列在搜索框下方，输入输入数量，如果需要，可以删除“x”。这当然会根据配方需要多少成分而增长。最后，我只需将数据插入到我的数据库中。
我已经看过很多关于获取自动完成搜索框功能的 AJAX 教程，但没有任何内容与值选择相关联。可以在http://supercook.com 找到我所追求的最佳示例。他们有它，所以你可以搜索食谱。
有什么建议或在线资源吗？
谢谢！
【问题讨论】：
标签： php mysql ajax forms search
你问了一个很好的问题。下面我写了一个简短的例子来帮助你入门。只需将其保存为 components.php 即可。当然，您需要添加数据库连接和查询以提供真实数据。我使用了 jQuery 库，因为它使 Javascript 部分变得更加容易。
<?php
// connect to database here
if (isset($_POST['q'])) {
if (trim($_POST['q']) === '') die('[]');
// $q = mysql_real_escape_string($_POST['q']);
// run a query like: "SELECT id, name FROM ingredients WHERE name LIKE '{$q}%'"
// and put the result in the $result array.
// This is sample data:
$result = array(
array('id' => 71, 'name' => 'apple'),
array('id' => 3, 'name' => 'anchovies'),
array('id' => 230, 'name' => 'artichoke'),
);
if (function_exists('json_encode')) die(json_encode($result));
else {
$escaped = array();
foreach ($result as $r) $escaped[] = str_replace(array('\\', '"'), array('\\\\', '\"'), $r);
die('["'.join('","', $escaped).'"]');
}
}
$data = array();
if (isset($_POST['ingredients'])) {
foreach ($_POST['ingredients'] as $i => $ingredient) {
$data[] = array(
'ingredient' => $ingredient,
'quantity' => $_POST['quantities'][$i],
);
}
// save data to the database here (or inside the foreach loop above)
}
?>
<html><head></head><body>
<style>
#wrap { position: relative }
#pop {
position: absolute;
border: 1px solid black;
background-color: white;
display: none;
}
</style>
<?php if (count($data)): ?>
<h3>Saved:</h3>
<pre><?php print_r($data) ?></pre>
<?php endif; ?>
<div id="wrap">
<input id="adder" />
<div id="pop"></div>
</div>
<form method="post">
Ingredients:<br />
<div id="recipe"></div>
<input type="submit" value="Save" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var last_query = '';
jQuery(function() {
jQuery('#adder').val('').keyup(function() {
var query = jQuery(this).val();
if (query != last_query) jQuery.post('ingredients.php', {q: query}, function(data) {
var p = jQuery('#pop').html('').show();
for (var i=0; i<data.length; i++) {
p.append(jQuery('<p>'+data[i].name+'</p>').bind('click', { ingredient: data[i] }, function(e) {
add_ingredient(e.data.ingredient);
jQuery('#pop').hide();
jQuery('#adder').val('');
}));
}
}, 'json');
else jQuery('#pop').show();
last_query = query;
});
});
function add_ingredient(data) {
console.log(data);
var ingredient = jQuery('<div> <input name="quantities[]" size="2" /> '+data.name
+ '<input type="hidden" name="ingredients[]" value="'+data.id+'" /></div>');
var remover = jQuery('<span>X</span>').click(function() {
jQuery(this).parent().remove();
});
jQuery('#recipe').append(ingredient.prepend(remover));
}
</script>
</body></html>
【讨论】：
echo function_exists('json_encode')? 'have json' : 'do not have json'; 如果没有，请尝试安装它。如果您在安装时遇到问题，请告诉我，我将重写代码，使其不再需要。
jQuery.post('test.php'... 或任何你命名的文件。