2011-06-16 76 views
6

我想将“具有多个值的JQuery UI自动完成”应用于一个注册表单输入字段。自动完成功能无法正常工作

我想要做什么:当访客输入现有用户的名字到这个输入字段时,首先,脚本搜索名字存在,完成它(如果存在),添加逗号。用户可以输入第二,第三...现有的用户名到这个字段,并且每次脚本都会自动完成。当访问者点击提交按钮时,PHP搜索这个用户名的id,创建id的数组,将它添加到db表中的新用户“friends”字段。

我的代码:

HTML

<form action="index.php" method="post">  
<input class="std" type="text" name="friends" id="friends"/> 
<input type="submit" name="submit"> 
</form> 

jQuery的

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

    $("#friends") 
     // 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("search.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; 
      } 
     }); 
}); 

该位置是完美的作品样本文件夹原来的PHP文件。但我想从获取数据库,而不是阵列
原始的search.php

$q = strtolower($_GET["term"]); 
if (!$q) return; 
$items = array(
"Great Bittern"=>"Botaurus stellaris", 
"Little Grebe"=>"Tachybaptus ruficollis", 
"Black-necked Grebe"=>"Podiceps nigricollis", 
"Little Bittern"=>"Ixobrychus minutus", 
"Black-crowned Night Heron"=>"Nycticorax nycticorax", 
"Purple Heron"=>"Ardea purpurea", 
"White Stork"=>"Ciconia ciconia", 
"Spoonbill"=>"Platalea leucorodia", 
"Red-crested Pochard"=>"Netta rufina", 
"Common Eider"=>"Somateria mollissima", 
"Red Kite"=>"Milvus milvus", 

); 

function array_to_json($array){ 

    if(!is_array($array)){ 
     return false; 
    } 

    $associative = count(array_diff(array_keys($array), array_keys(array_keys($array)))); 
    if($associative){ 

     $construct = array(); 
     foreach($array as $key => $value){ 

      // We first copy each key/value pair into a staging array, 
      // formatting each key and value properly as we go. 

      // Format the key: 
      if(is_numeric($key)){ 
       $key = "key_$key"; 
      } 
      $key = "\"".addslashes($key)."\""; 

      // Format the value: 
      if(is_array($value)){ 
       $value = array_to_json($value); 
      } else if(!is_numeric($value) || is_string($value)){ 
       $value = "\"".addslashes($value)."\""; 
      } 

      // Add to staging array: 
      $construct[] = "$key: $value"; 
     } 

     // Then we collapse the staging array into the JSON form: 
     $result = "{ " . implode(", ", $construct) . " }"; 

    } else { // If the array is a vector (not associative): 

     $construct = array(); 
     foreach($array as $value){ 

      // Format the value: 
      if(is_array($value)){ 
       $value = array_to_json($value); 
      } else if(!is_numeric($value) || is_string($value)){ 
       $value = "'".addslashes($value)."'"; 
      } 

      // Add to staging array: 
      $construct[] = $value; 
     } 

     // Then we collapse the staging array into the JSON form: 
     $result = "[ " . implode(", ", $construct) . " ]"; 
    } 

    return $result; 
} 

$result = array(); 
foreach ($items as $key=>$value) { 
    if (strpos(strtolower($key), $q) !== false) { 
     array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key))); 
    } 
    if (count($result) > 11) 
     break; 
} 
echo array_to_json($result); 

更改的search.php

$conn = mysql_connect("localhost", "tural", "0579ural") or die(mysql_error());; 
mysql_select_db("askon", $conn) or die(mysql_error());; 
$q = strtolower($_GET["term"]); 
if (!$q) return; 
$query = mysql_query("select id, fullname from usr_table where fullname like '$q%'") or die(mysql_error());; 
$results = array(); 
while ($row = mysql_fetch_array($query)) { 
    $results[] = array($row[1] => $row[0]); 
} 
echo json_encode($results); 

自动完成PHP脚本prntscr.com/22mxl,但我觉得有些不对劲与jquery :它不显示菜单。 prntscr.com/22mxg。如何解决这个问题? P.S原始SEARCH.PHP它返回像这样prntscr.com/22n0e和显示prntscr.com/22n0r

+0

我想你需要json_encode($ results [0]);检查萤火虫的回应是否得到任何回应或根本没有。 – 2011-06-16 16:22:08

+0

没有。 search.php工作正常。我应该改变jQuery的一部分。请打开屏幕截图,你会看到原来的文件之间的差异,并改变了你的JavaScript中的一个 – 2011-06-16 16:24:42

+0

do console.log(this.value)在选择函数 – 2011-06-16 16:32:37

回答

相关问题