自動完成搜索框，從結果中選擇多個值

我使用php/mysql創建了自己的配方框，其中一個部分是卡住的，實際上是創建食譜，特別是選擇了配料。自動完成搜索框，從結果中選擇多個值

我想要做的就是擁有一個自動完成的搜索框，我可以在其中輸入成分名稱，將結果放在右下方，然後單擊我要查找的結果。點擊配料後，它將在搜索框下方列出，並輸入數量並在需要時刪除「x」。這當然會隨着配方需要多少配料而增長。最後，我只需要獲取數據並插入到我的數據庫中。

我見過很多關於獲取自動完成搜索框功能的AJAX教程，但沒有將它綁定到值選擇。我要去的最好的例子可以在http://supercook.com找到。他們有它，所以你可以搜索食譜。

任何建議或在線資源？

謝謝！

來源

2010-07-14 Cass

你問了一個很好的問題。下面我寫了一個簡短的例子來幫助你入門。只要將它保存爲ingredients.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>

來源

2010-07-14 03:42:25

哇，沒想到所有那些......太棒了！雖然我有一些麻煩。再次，我是一個noob。這應該能夠按原樣運行嗎？我只是想看到，這將適用於您輸入的樣本數據，但事實並非如此。我得到這個通知：「通知：未定義指數：●在C：\ WAMP \ WWW \配方\第5行test.php的」此外，沒有結果輸入字段下框彈出，當我開始輸入樣本數據。有沒有這個工作的任何先決條件？ – Cass 2010-07-16 00:51:52

是的，它應該按原樣運行，如果您命名文件ingredients.php。我剛剛編輯了代碼來修復「未定義索引」錯誤，但我不認爲這會阻止它工作。一種可能的可能性是您沒有安裝JSON模塊，所以json_encode（）函數不起作用。要檢查這個，把這行放在一個PHP文件中：'echo function_exists（'json_encode'）？ '有json'：'沒有json';'如果你沒有，請嘗試安裝它。如果您在安裝時遇到問題，請告訴我，我會重寫代碼，以免它需要它。 – 2010-07-16 02:38:37

如果您使用來自www.wampserver.com的最新版本的wamp，理論上您已經擁有JSON支持。你是否收到其他錯誤信息？嘗試檢查是否有任何Javascript錯誤。如果您使用的是Firefox，Firebug擴展可以幫助您進行調試。但是，它完全適用於我的服務器和瀏覽器....對不起，它不適合你！ – 2010-07-16 02:42:42

自動完成搜索框，從結果中選擇多個值

回答

相關問題