自动完成无法正常工作

Posted 2023-03-05

【中文标题】自动完成无法正常工作

【英文标题】：Autocomplete doesn't work properly

【发布时间】：2011-09-16 12:53:47

【问题描述】：

我想将“具有多个值的 Jquery UI 自动完成”应用到一个注册表单输入字段。

我想要做什么：当访问者在此输入字段中键入现有用户的名称时，首先，脚本搜索名称存在，完成它（如果存在），添加逗号。用户可以在此字段中键入第二个、第三个...现有用户名，并且每次脚本都会自动完成。当访问者点击提交按钮时，php 搜索此用户名的 id，创建 id 数组，将其添加到 db 表中的新用户“朋友”字段中。

我的代码：

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 文件，可以完美运行。但我想从数据库而不是数组中获取Original 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 FOR ORIGINAL SEARCH.PHP 它返回类似prntscr.com/22n0e 并显示prntscr.com/22n0r。

【问题讨论】：

我认为你需要 json_encode($results[0]) ;检查萤火虫的响应是你得到任何响应还是什么都没有。

没有。 search.php 工作正常。我应该在 jquery 部分改变一些东西。请打开屏幕截图，您会看到原始文件和更改文件之间的区别

在你的javascript中做console.log（this.value）里面的select函数

我解决了：更改 $results[] = array ( "id" => $row[0] , "label" => $row[1], "value" => $row[ 1]);但现在另一个问题：我只需要用户名和用户名。我不需要价值。如何从 jquery 中删除这部分？

不要自己拆分结果，而是使用插件的 "multiple":true 选项

【参考方案1】：

SemanticScuttle 做你想做的事：

jQuery autocomplete setup Ajax callback

看看（工作的）第一个文件，它应该给你足够的提示让你的工作。