Автозаполнение не работает должным образом

6

Я хочу применить "Автозаполнение JQuery UI с несколькими значениями" в поле ввода регистрационных форм.

То, что я хочу сделать точно: когда имя посетителя для существующего пользователя в этом поле ввода, в первую очередь, script ищет существование имени, завершает его (если существует), добавляет запятую. Пользователь может ввести второй, третий... существующие имена пользователей в это поле, и каждый раз script будет автоматически завершен. И когда клиент нажимает кнопку отправки, PHP ищет идентификатор этих имен пользователей, создает массив идентификаторов, добавляет его в новое поле друзей "друзей" в таблице 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 файл из папки примеров, который отлично работает. но я хочу получить из базы данных вместо массива
Оригинал 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);

Autocomplete php script работает prntscr.com/22mxl, но я думаю, что что-то не так с jquery: оно не отображает меню. prntscr.com/22mxg. Как решить эту проблему? PS ДЛЯ ОРИГИНАЛЬНОГО ПОИСКА. PHP IT RETURNS что-то вроде этого prntscr.com/22n0e и показывает prntscr.com/22n0r.

  • 0
    я думаю, что вам нужно json_encode ($ results [0]); проверьте в firebug ответ вы получаете какой-либо ответ или вообще ничего.
  • 0
    нет. search.php работает правильно. Я должен что-то изменить в JQuery части. пожалуйста, откройте скриншоты, и вы увидите разницу между оригинальным и измененным файлом
Показать ещё 3 комментария
Теги:
autocomplete
jquery-ui-autocomplete

1 ответ

1
Лучший ответ

SemanticScuttle делает то, что вы хотите:

Посмотрите на первый рабочий файл (рабочий), он должен дать вам достаточно подсказок, чтобы заставить вас работать.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню