jquery - Ajax jquery サーチャー

Question

こんにちは私は最近、いくつかのチュートリアルの助けを借りてこのスクリプトをコーディングしました。「問題」は、名前を手動で挿入できるようにしたいということです。現在、魔女がデータベースに存在しない名前を入力し、入力フィールドをクリックすると、入力したテキストが自動的に消去されます。手動で入力したテキストをそこに表示したくないので、ユーザーが入力をクリックしたりタブを使用したりすると、提案 div がフェードアウトする必要があります。

<script type="text/javascript">
    function lookup(inputString) {
        if(inputString.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("../autofill_institution.php", {queryString: ""+inputString+""}, function(data){
                if(data.length > 0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) {
            $('#inputString').val(thisValue);
            setTimeout("$('#suggestions').hide();", 200);
    }
</script>

score 1 · Accepted Answer

入力がフォーカスを失ったときに提案リストを非表示にするには、次のようなことができます

$("idoftheinputfield").on("blur",function(e){
    $('#suggestions').hide()
})

フォーカスが失われたときに入力フィールドがクリアされる理由を考えさせられます。とにかく、手動で入力した値を保持したい場合は、次のように少し調整できます。

$("idoftheinputfield").on("blur",function(e){
    var mycurrentvalue = $(this).val();
    $(this).val(mycurrentvalue);
    $('#suggestions').hide()
})

お役に立てれば..

score 0 · Accepted Answer

ここでは、Ajax、PHP、および JQuery でできることを示します。これが役立つか、あなたの出発点になることを願っています。

ここでライブデモとソースコードを参照してください。

http://purpledesign.in/blog/to-create-a-live-search-like-google/

検索ボックスを作成します。このような入力フィールドになる場合があります。

<input type="text" id="search" autocomplete="off">

ここで、ユーザーがテキスト領域に入力した内容を聞く必要があります。このために、jquery live() と keyup イベントを使用します。キーアップごとに、php スクリプトを実行する jquery 関数「検索」があります。

このようなhtmlがあるとします。結果を表示するための入力フィールドとリストがあります。

 <div class="icon"></div>
 <input type="text" id="search" autocomplete="off">
 <ul id="results"></ul>

入力フィールドの keyup イベントをリッスンする Jquery スクリプトがあり、空でない場合は search() 関数を呼び出します。search() 関数は php スクリプトを実行し、AJAX を使用して同じページに結果を表示します。

ここにJQueryがあります。

    $(document).ready(function() {  

        // Icon Click Focus
        $('div.icon').click(function(){
            $('input#search').focus();
        });

        //Listen for the event
            $("input#search").live("keyup", function(e) {
            // Set Timeout
            clearTimeout($.data(this, 'timer'));

            // Set Search String
            var search_string = $(this).val();

            // Do Search
            if (search_string == '') {
                $("ul#results").fadeOut();
                $('h4#results-text').fadeOut();
            }else{
                $("ul#results").fadeIn();
                $('h4#results-text').fadeIn();
                $(this).data('timer', setTimeout(search, 100));
            };
        });


        // Live Search
        // On Search Submit and Get Results
        function search() {
            var query_value = $('input#search').val();
            $('b#search-string').html(query_value);
            if(query_value !== ''){
                $.ajax({
                    type: "POST",
                    url: "search_st.php",
                    data: { query: query_value },
                    cache: false,
                    success: function(html){
                        $("ul#results").html(html);

                    }
                });
            }return false;    
        }



    })

;

php で、mysql データベースにクエリを送信します。php は、AJAX を使用して html に入れられる結果を返します。ここでは、結果が html リストに入れられます。

'type' と 'desc' という 2 つの類似した列名を持つ、animal と bird という 2 つのテーブルを含むダミーデータベースがあるとします。

//search.php

// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";

//  Connection
global $tutorial_db;

$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");

//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %s\n", $tutorial_db->connect_error);
    exit();
}
    $html = '';
    $html .= '<li class="result">';
    $html .= '<a target="_blank" href="urlString">';
    $html .= '<h3>nameString</h3>';
    $html .= '<h4>functionString</h4>';
    $html .= '</a>';
    $html .= '</li>';
     $search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
    $search_string = $tutorial_db->real_escape_string($search_string);

// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
    // Build Query
    $query = "SELECT *
     FROM animals
     WHERE type LIKE '%".$search_string."%'
     UNION ALL SELECT *
     FROM birf
     WHERE type LIKE '%".$search_string."%'"
     ;
    $result = $tutorial_db->query($query);
        while($results = $result->fetch_array()) {
            $result_array[] = $results;
        }

        // Check If We Have Results
        if (isset($result_array)) {
            foreach ($result_array as $result) {

                // Format Output Strings And Hightlight Matches
                $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
                $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
            $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';

                // Insert Name
                $output = str_replace('nameString', $display_name, $html);

                // Insert Function
                $output = str_replace('functionString', $display_function, $output);

                // Insert URL
                $output = str_replace('urlString', $display_url, $output);



                // Output
                echo($output);
            }
        }else{

            // Format No Results Output
            $output = str_replace('urlString', 'javascript:void(0);', $html);
            $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
            $output = str_replace('functionString', 'Sorry :(', $output);

            // Output
            echo($output);
        }
    }

jquery - Ajax jquery サーチャー

2 に答える 2

Related

Reference