jQuery автозаполнение (удаленный) - пример

Я действительно надеялся избежать публикации нового вопроса, но я не могу найти функционирующий пример функции автозаполнения jQuery, которая включает в себя как вызывающую страницу, так и страницу "поиск". Раздел "демонстрации и документация" jQueryUI не включает источник " поиск.на PHP"

Я пробовал десятки комбинаций, но вот с чего я начал:

<style>
    .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
    </style>
    <script>
    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

        $( "#birds" ).autocomplete({
            source: "search.php",
            minLength: 1,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    </script>



<div class="demo">

<div class="ui-widget">
    <label for="birds">Birds: </label>
    <input id="birds" />
</div>

<div class="ui-widget" style="margin-top:2em; font-family:Arial">
    Result:
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</div>

и поиск.на PHP:

    $conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
    mysql_select_db("DATABASE", $conn);
    $q = strtolower($_GET["birds"]);

    $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
    while ($row = mysql_fetch_array($query)) {
    echo json_encode($row);
}

есть ли у кого-нибудь фрагменты кода, которые показывают оба стороны этого уравнения, которые они могут разделить? Большое спасибо за любую помощь вы можете предоставить.

8
autocomplete jquery mysql php

4 ответов

вот правильный код для поиска.на PHP:

    $conn = mysql_connect("localhost", "USERNAME", "PASSWORD");
    mysql_select_db("DATABASE", $conn);
    $q = strtolower($_GET["term"]);

$return = array();
    $query = mysql_query("select FIELD from TABLE where FIELD like '%$q%'");
    while ($row = mysql_fetch_array($query)) {
    array_push($return,array('label'=>$row['FIELD'],'value'=>$row['FIELD']));
}
echo(json_encode($return));

некоторые ключевые моменты

  • слово термин нигде в образце вызывающей страницы, заданной jqueryui, но это имя Querystring используется
  • вы должны создать массив значения, а затем кодировать json перед возвратом

Я надеюсь, что это помогает некоторым людям в будущем!

18

есть несколько больших учебников, когда вы google для "jQuery UI Autocomplete Tutorial", я полагаю, что это может помочь:http://www.google.com/search?q=jqueryUI + автозаполнение + учебник

2

вот обрезанная версия автозаполнения, которую я ранее использовал. Может быть ошибка или две, так как я вырезал код.

на сервере:

    if(isset($_POST['queryString'])) {
    $queryString = $_POST['queryString'];
    $html = '';

    if(strlen($queryString) >1) {
        $names= explode(" ", $queryString ); 
        foreach ($names as &$value) {
            // step 1: first names
            $result= queryf("SELECT *, 
                    MATCH(productName, productTags, productCategory, productOneLine) 
                    AGAINST ('*$queryString*' IN BOOLEAN MODE) 
                    AS score FROM products
                    WHERE MATCH(productName, productTags, productCategory, productOneLine) 
                    AGAINST ('*$queryString*' IN BOOLEAN MODE)
                    AND productStatus='1'
                    ORDER BY score DESC
                    LIMIT 10") ;
            if($result) {
while ($row = mysql_fetch_array($result)) {
                            echo '<li onclick="location.href=\'/'.$row['productCategory'].'/'.$row['productSlug'].'/\';" style="cursor: pointer;"><a href="/'.$row['productCategory'].'/'.$row['productSlug'].'/">
                            <div class="resultImg"><img src="/image.php?width=24&height=24&image='.$row['productIcon'].'" /></div> 
                            <span class="productName">'.$row['productName'].'</span><br />
                            '.$row['productOneLine'].'</a></li>';
                        }

                    }
        } else {
                    echo '
                <ul>
                    <li>
                    <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> 
                    <span class="productName">Processing...</span><br />
                    Please keep typing while we process your code</li>
                </ul>';
                }
        }
    } else {
        echo '
                <ul>
                    <li>
                    <div class="resultImg"><img src="/image.php?width=24&height=24&image=/images/icon_searching.gif" /></div> 
                    <span class="productName">Processing...</span><br />
                    Please keep typing while we process your code</li>
                </ul>';
    }
} else {
    echo 'Nothing to see here.';
}

сценарий:

function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $('#country').addClass('load');
        $.post("/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#country').removeClass('load');
            }
        });
    }
}
function fill(thisValue) {
    $('#country').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);
}

и на странице XHTML:

<div id="bg_searchMain">
                        <form id="form" action="#">
                        <input type="text" style="float:left; display:inline; width:430px; margin:5px 0 0 5px; background:none; border:none;" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" autocomplete="off" />
                        <!--<img src="images/button_search.gif" alt="Find" id="button_search" />-->
                        <div class="suggestionsBox" id="suggestions" style="display: none;">
                            <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
                        </div>

                        </form>
                    </div>

комментарии о "скорости принятия" не нужны это более полезно, чтобы опубликовать это для Google, чем для репутации.

1

Я сделал php, как и это было успешно, я использовал метод mysqli. 

    $q = strtolower($_GET["term"]);

    $return = array();
    $query = "select name from students where name like '%$q%'";
    $result=$conn->query($query);
            while ($cresult=$result->fetch_row()){array_push($return,array('label'=>$cresult[0],'value'=>$cresult[0]));
    }
    echo(json_encode($return));

?>

0