vous avez posé une excellente question. Ci-dessous, j'ai écrit un court exemple pour vous aider à démarrer. Il suffit de l'enregistrer sous ingredients.php et cela devrait fonctionner. Bien sûr, vous devrez ajouter votre connexion à la base de données et votre requête pour lui donner des données réelles. J'ai utilisé la librairie jQuery car elle rend la partie Javascript beaucoup plus facile.
<?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>
Wow, ne m'attendais pas à ça ... génial! Bien que j'ai quelques problèmes. Encore une fois, je suis un noob. Est-ce que cela devrait fonctionner tel quel? Je voulais juste voir que cela fonctionnerait avec les exemples de données que vous avez fournis, mais ce n'est pas le cas. Je reçois cet avis: "Notice: Undefined index: q dans C: \ wamp \ www \ recette \ test.php sur la ligne 5" En outre, aucune boîte de résultats popping sous le champ de saisie quand je commencez à saisir le données d'échantillon. Y a-t-il des prérequis pour que cela fonctionne? – Cass
Oui, il était supposé fonctionner tel quel, si vous nommez le fichier ingredients.php. Je viens d'éditer le code pour corriger l'erreur "undefined index", mais je ne pense pas que cela l'empêcherait de fonctionner. Une possibilité probable est que vous n'avez pas le module JSON installé, donc la fonction json_encode() ne fonctionne pas. Pour vérifier cela, placez cette ligne dans un fichier PHP: 'echo function_exists ('json_encode')? 'json': 'n'ayez pas json'; 'Si vous ne l'avez pas, essayez de l'installer. Si vous avez des problèmes pour l'installer, faites le moi savoir et je réécrirai le code pour qu'il ne soit pas nécessaire. –
Si vous utilisez la dernière version de wamp sur www.wampserver.com, vous disposez théoriquement d'un support JSON. Recevez-vous d'autres messages d'erreur? Essayez de vérifier si vous avez des erreurs Javascript aussi bien. Si vous utilisez Firefox, l'extension Firebug peut vous aider à déboguer. Cependant, tout fonctionne parfaitement sur mon serveur et mon navigateur .... Désolé, cela ne fonctionne pas pour vous! –