Jquery自動完成：來自SQL DB的多個值

Question

我試圖爲多個值實現jqueryui的自動完成，但遇到了麻煩。當我第一次開始輸入名字時，選項彈出正常，但是一旦選擇了這個名字，逗號就會被添加到列表中，並且在我輸入時不再顯示選項。我的代碼如下。

$(function() { 
function split(val) { 
    return val.split(/,\s*/); 
} 
function extractLast(term) { 
    return split(term).pop(); 
} 

$("#tags") 
    // don't navigate away from the field on tab when selecting an item 
    .bind("keydown", function(event) { 
    if (event.keyCode === $.ui.keyCode.TAB && 
     $(this).data("ui-autocomplete").menu.active) { 
     event.preventDefault(); 
    } 
    }) 
    $('.theme').autocomplete({ 
      source:'../../assets/php/themedata.php', 
      minLength:2, 
          width: 300, 

    focus: function() { 
     // prevent value inserted on focus 
     return false; 
    }, 
    select: function(event, ui) { 
     var terms = split(this.value); 
     // remove the current input 
     terms.pop(); 
     // add the selected item 
     terms.push(ui.item.value); 
     // add placeholder to get the comma-and-space at the end 
     terms.push(""); 
     this.value = terms.join(", "); 
     return false; 
    } 
    }).data("ui-autocomplete")._renderItem = function (ul, item) { 
    return $("<li />") 
     .data("ui-autocomplete-item", item) 
     .append("<a><img src='" + item.avatar + "' />" + item.value + "</a>") 
     .appendTo(ul); 
}; 
}); 

themedata.php

$st = DB::singleton() 
    ->prepare(
     'select * ' . 
     'from themes ' . 
     'where theme like :theme ' . 
     'order by theme asc ' . 
     'limit 0,10'); 

$themeZip = '%' . $_REQUEST['term'] . '%'; 
$st->bindParam(':theme', $themeZip, PDO::PARAM_STR); 

$data = array(); 
if ($st->execute()) 
{ 
    while ($row = $st->fetch(PDO::FETCH_OBJ)) 
    { 
$data[] = array(
    'label' => $row->theme . " , " . $row->desc , 
    'value' => $row->theme 
); 
} 
} 
echo json_encode($data); 
flush(); 

Answer 1

$(function() { 
function split(val) { 
    return val.split(/,\s*/); 
} 
function extractLast(term) { 
    return split(term).pop(); 
} 

$("#theme") 
    // don't navigate away from the field on tab when selecting an item 
    .bind("keydown", function(event) { 
     if (event.keyCode === $.ui.keyCode.TAB && 
       $(this).data("autocomplete").menu.active) { 
      event.preventDefault(); 
     } 
    }) 
    .autocomplete({ 
     source: function(request, response) { 
      $.getJSON("../../assets/php/themedata.php", { 
       term: extractLast(request.term) 
      }, response); 
     }, 
     search: function() { 
      // custom minLength 
      var term = extractLast(this.value); 
      if (term.length < 2) { 
       return false; 
      } 
     }, 
     focus: function() { 
      // prevent value inserted on focus 
      return false; 
     }, 
     select: function(event, ui) { 
      var terms = split(this.value); 
      // remove the current input 
      terms.pop(); 
      // add the selected item 
      terms.push(ui.item.value); 
      // add placeholder to get the comma-and-space at the end 
      terms.push(""); 
      this.value = terms.join(", "); 
      return false; 
     } 
    });