自动完成搜索框，从结果中选择多个值
Posted
技术标签:
【中文标题】自动完成搜索框，从结果中选择多个值【英文标题】：Auto-complete search box, selecting multiple values from results 【发布时间】：2011-03-15 15:53:42 【问题描述】：我正在使用 php/mysql 创建自己的食谱框，而我坚持的一部分实际上是创建食谱，特别是选择成分。
我想做的是有一个自动完成的搜索框，我可以在其中输入成分的名称，将结果下拉到正下方，然后单击我要查找的那些。点击成分后，它会列在搜索框下方，输入输入数量，如果需要，可以删除“x”。这当然会根据配方需要多少成分而增长。最后，我只需将数据插入到我的数据库中。
我已经看过很多关于获取自动完成搜索框功能的 AJAX 教程，但没有任何内容与值选择相关联。可以在http://supercook.com 找到我所追求的最佳示例。他们有它，所以你可以搜索食谱。
有什么建议或在线资源吗？
谢谢！
【问题讨论】：
【参考方案1】：你问了一个很好的问题。下面我写了一个简短的例子来帮助你入门。只需将其保存为 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>
【讨论】：
哇，没想到这么多……太棒了！虽然我遇到了一些麻烦。再说一次，我是菜鸟。这应该能够按原样运行吗？我只是想看看这是否适用于您输入的示例数据，但事实并非如此。我收到此通知：“注意：未定义索引：第 5 行 C:\wamp\www\recipe\test.php 中的 q”此外，当我开始输入示例数据时，输入字段下没有弹出结果框。是否有任何先决条件才能使用？ 是的，如果您将文件命名为 ingredients.php，它应该按原样运行。我刚刚编辑了代码以修复“未定义索引”错误，但我认为这不会阻止它工作。一种可能的可能性是您没有安装 JSON 模块，因此 json_encode() 函数不起作用。要检查这一点，请将这一行放入 PHP 文件中：echo function_exists('json_encode')? 'have json' : 'do not have json'; 如果没有，请尝试安装它。如果您在安装时遇到问题，请告诉我，我将重写代码，使其不再需要。
如果您使用的是来自 www.wampserver.com 的最新版本的 wamp，那么理论上您已经支持 JSON。您是否收到任何其他错误消息？尝试检查您是否还有任何 Javascript 错误。如果您使用的是 Firefox，Firebug 扩展可以帮助您进行调试。但是，这一切都可以在我的服务器和浏览器上完美运行......对不起，它不适合你！
好的，现在已经编辑，不需要json_encode了。
哦，我很傻，之前没有注意到您已重命名文件 test.php...您需要重命名文件成分.php 或替换 @ 987654323@ 和 jQuery.post('test.php'... 或任何你命名的文件。以上是关于自动完成搜索框，从结果中选择多个值的主要内容，如果未能解决你的问题，请参考以下文章