당신은 좋은 질문을했습니다. 아래에서는 간단한 예를 작성하여 시작하도록하겠습니다. 그냥 ingredients.php로 저장하면 효과가 있습니다. 물론 실제 데이터를 제공하기 위해 데이터베이스 연결과 쿼리를 추가해야합니다. Javascript 부분을 훨씬 쉽게 만들기 때문에 jQuery 라이브러리를 사용했습니다.
<?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>
와우는 모든 것을 기대하지 않았습니다 ... 최고! 나는 약간의 문제가있다. 다시, 나는 멍청한 행동이다. 이 항목을있는 그대로 실행할 수 있습니까? 이 예제는 사용자가 입력 한 샘플 데이터와 함께 작동한다는 것을 알고 싶었지만 그렇지 않았습니다. 나는이 통지를 얻을 : "공지 사항 : 정의되지 않은 인덱스 : Q를 C에서 : \ WAMP \ www가 \ 조리법 \ 5 행에 test.php" 는 또한, 상자가 입력 필드에서 터지는 결과가 나는 시작하지 않을 때 입력 샘플 데이터. 작동하려면 어떤 필수 사항이 있습니까? – Cass
예, 파일 이름을 ingredients.php로 지정하면 그대로 실행됩니다. 지금 막 "정의되지 않은 색인"오류를 수정하는 코드를 편집했지만 작동하지 않을 것이라고 생각하지 않습니다. JSON 모듈을 설치하지 않았으므로 json_encode() 함수가 작동하지 않을 가능성이 있습니다. 이것을 확인하려면이 줄을 PHP 파일에 넣으십시오 :'echo function_exists ('json_encode')? 'json을 가지고있다', 'json이 없다', '가지고 있지 않다면 설치하십시오. 설치에 문제가있는 경우 알려 주시면 코드를 다시 작성할 필요가 없도록 코드를 다시 작성하겠습니다. –
www.wampserver.com에서 최신 버전의 wamp를 사용하고 있다면 이론적으로 이미 JSON을 지원하고 있습니다. 다른 오류 메시지가 표시됩니까? Javascript 오류가 있는지 확인하십시오. Firefox를 사용하는 경우 Firebug 확장 프로그램을 사용하여 디버그를 도울 수 있습니다. 그러나, 그것은 모두 내 서버와 브라우저에서 완벽하게 작동합니다 ... 죄송합니다 그것은 당신을 위해 작동하지 않습니다! –