লাইভ অটোফিল অনুসন্ধান কীভাবে তৈরি করবেন?

Question

আমি বর্তমানে একটি ওয়ার্ডপ্রেস অনুসন্ধান ফাংশন তৈরির চেষ্টা করছি যা অনুসন্ধান বারের নীচে সরাসরি ফলাফল দেখায়। বিশ্বব্যাংকের ওয়েবসাইটে উদাহরণ রয়েছে (নীচে পর্দা)। আমি গুগল.কম এ খুঁজে পাবার মতো একটি অটোফিল খুঁজছি না যা আপনার টাইপ করা শব্দগুলি সম্পূর্ণ করে, বরং আমি এটি সাইটে প্রকৃত পোস্টগুলি সন্ধান করতে চাই।

আমি ওয়ার্ডপ্রেস উত্তর এবং অন্যান্য অনুরূপ সংস্থানগুলির মাধ্যমে একটি স্ক্রাব করার চেষ্টা করেছি তবে কেবলমাত্র গুগল টাইপ অনুসন্ধান কার্যকর করতে পেরেছি যা আমি যা খুঁজছি তা নয়। সঠিক দিকনির্দেশে যে কোনও সহায়তা বা পয়েন্টগুলি প্রশংসিত হবে।

Comments

ব্যবহারকারী যখন পরামর্শ ক্লিক করেন তখন আপনি কী হতে চান? এটি দিয়ে কেবল অনুসন্ধান বাক্স পূরণ করবেন?

— রাস্ট

আপনাকে সংশ্লিষ্ট পোস্টে নিয়ে যায়। ব্যবহারকারী এখনও অনুসন্ধানের ফলাফলগুলি টাইপ করতে এবং পেতে পারেন, কেবলমাত্র পরামর্শের উপর ক্লিক করলেই পোস্টটি সরাসরি আসে।

— এমএমএক্সিমালিস্ট

ভরাট করার জন্য আমার কাছে দ্রুত সমাধান রয়েছে, তবে আরও সমস্যার সাথে সংযুক্ত করে ... এটি সম্পর্কে ভাববেন।

— রাস্ট

Answer 1

নিম্নলিখিত jQuery UI স্বতঃপূরণ ব্যবহার করে, যা ওয়ার্ডপ্রেসে অন্তর্ভুক্ত হয়েছে 3.3 থেকে। (আমি @ রর্স্ট : ডি থেকে ফর্ম্যাট ধার নিয়েছি )।

এটি আপনি ঠিক পরে যা করছেন তা এখনও ঠিক নয়, তবে আপনাকে একটি ভাল সূচনা পয়েন্ট দেয়। নিম্নলিখিতটিতে একটি বেসিক jQuery UI স্টাইলিং ব্যবহার করা হয়েছে তবে আপনি বর্তমানে ট্র্যাকটিতে কাজ করে এমন একটি ব্যবহার করতে পারেন এবং এটি আপনার প্লাগ-ইন ফোল্ডার থেকে কল করতে পারেন।

class AutoComplete {

    static $action = 'my_autocomplete';//Name of the action - should be unique to your plugin.

    static function load() {
        add_action( 'init', array( __CLASS__, 'init'));
    }

    static function init() {
        //Register style - you can create your own jQuery UI theme and store it in the plug-in folder
        wp_register_style('my-jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');    
        add_action( 'get_search_form', array( __CLASS__, 'get_search_form' ) );
        add_action( 'wp_print_footer_scripts', array( __CLASS__, 'print_footer_scripts' ), 11 );
        add_action( 'wp_ajax_'.self::$action, array( __CLASS__, 'autocomplete_suggestions' ) );
        add_action( 'wp_ajax_nopriv_'.self::$action, array( __CLASS__, 'autocomplete_suggestions' ) );
    }

    static function get_search_form( $form ) {
        wp_enqueue_script( 'jquery-ui-autocomplete' );
        wp_enqueue_style('my-jquery-ui');
        return $form;
    }

    static function print_footer_scripts() {
        ?>
    <script type="text/javascript">
    jQuery(document).ready(function ($){
        var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
        var ajaxaction = '<?php echo self::$action ?>';
        $("#secondary #searchform #s").autocomplete({
            delay: 0,
            minLength: 0,
            source: function(req, response){  
                $.getJSON(ajaxurl+'?callback=?&action='+ajaxaction, req, response);  
            },
            select: function(event, ui) {
                window.location.href=ui.item.link;
            },
        });
    });
    </script><?php
    }

    static function autocomplete_suggestions() {
        $posts = get_posts( array(
            's' => trim( esc_attr( strip_tags( $_REQUEST['term'] ) ) ),
        ) );
        $suggestions=array();

        global $post;
        foreach ($posts as $post): 
                    setup_postdata($post);
            $suggestion = array();
            $suggestion['label'] = esc_html($post->post_title);
            $suggestion['link'] = get_permalink();

            $suggestions[]= $suggestion;
        endforeach;

        $response = $_GET["callback"] . "(" . json_encode($suggestions) . ")";  
        echo $response;  
        exit;
    }
}
AutoComplete::load();

Answer 2

ঠিক আছে, এটি খুব মৌলিক উদাহরণ কোড যা suggest.jsঅজ্যাক্সের জন্য নেটিভ , ডাব্লুপি কোর ব্যবহার করে এবং ডিফল্ট অনুসন্ধান ফর্মের সাথে আবদ্ধ হয় (আনমোডাইফাইড get_search_form()কল থেকে )। এটি আপনি যা চেয়েছিলেন তা স্পষ্টভাবে নয়, তবে ক্রমবর্ধমান অনুসন্ধানটি নিখুঁত হওয়ার জন্য বিশাল ব্যথা। :)

class Incremental_Suggest {

    static function on_load() {

        add_action( 'init', array( __CLASS__, 'init' ) );
    }

    static function init() {

        add_action( 'wp_print_scripts', array( __CLASS__, 'wp_print_scripts' ) );
        add_action( 'get_search_form', array( __CLASS__, 'get_search_form' ) );
        add_action( 'wp_print_footer_scripts', array( __CLASS__, 'wp_print_footer_scripts' ), 11 );
        add_action( 'wp_ajax_incremental_suggest', array( __CLASS__, 'wp_ajax_incremental_suggest' ) );
        add_action( 'wp_ajax_nopriv_incremental_suggest', array( __CLASS__, 'wp_ajax_incremental_suggest' ) );
    }

    static function wp_print_scripts() {

        ?>
    <style type="text/css">
        .ac_results {
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            z-index: 10000;
            display: none;
            border-width: 1px;
            border-style: solid;
        }

        .ac_results li {
            padding: 2px 5px;
            white-space: nowrap;
            text-align: left;
        }

        .ac_over {
            cursor: pointer;
        }

        .ac_match {
            text-decoration: underline;
        }
    </style>
    <?php
    }

    static function get_search_form( $form ) {

        wp_enqueue_script( 'suggest' );

        return $form;
    }

    static function wp_print_footer_scripts() {

        ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#s').suggest('<?php echo admin_url( 'admin-ajax.php' ); ?>' + '?action=incremental_suggest');
        });
    </script><?php
    }

    static function wp_ajax_incremental_suggest() {

        $posts = get_posts( array(
            's' => $_REQUEST['q'],
        ) );

        $titles = wp_list_pluck( $posts, 'post_title' );
        $titles = array_map( 'esc_html', $titles );
        echo implode( "\n", $titles );

        die;
    }
}

Incremental_Suggest::on_load();

Answer 3

অবশ্যই এটি অবশ্যই অবশ্যই এজ্যাক্স ব্যবহার করেই করা উচিত তবে এখানে একটি সমস্যা রয়েছে। যেহেতু ওয়ার্ডপ্রেস মাইএসকিউএল ব্যবহার করে, আপনি সার্ভারের সাথে সত্যিকারের ডাটাবেস কোয়েরি ট্রাই অ্যাজাক্সটি পূরণ করার চেষ্টা করলে আপনার সার্ভারকে চাপ দেওয়া যেতে পারে তবে আপনি যা করতে পারেন তা এমন একটি সিস্টেম বিকাশ করা যেখানে সমস্ত পোস্ট একটি বড় "wp_options" এ সংরক্ষিত থাকে ক্ষেত্র এবং তারপরে যখন কোনও অনুসন্ধান করা হয় আপনি সত্য অনুসন্ধান করার পরিবর্তে সেই থেকে প্রশ্নটি করেন। তবে মনে রাখবেন প্রতিবার আপনি কোনও পোস্ট তৈরি বা সম্পাদনা করার সময় আপনাকে পাঠের / সিরিয়ালযুক্ত ভেরিয়েবলের এই অংশটি আপডেট করতে হবে।

আপনি যদি এই সমাধানটি বিকাশে কিছুটা সময় ব্যয় করতে রাজি না হন তবে আমি আপনাকে এই জাতীয় "লাইভ অনুসন্ধান" করার পরামর্শ দিচ্ছি না।

Comments

এ জাতীয় ব্যবহারের ক্ষেত্রে মাইএসকিউএল অনুরোধগুলির রিসোর্সের ব্যবহার অ্যাজাক্স অনুরোধগুলির জন্য ডাব্লুপি লোড লোডের সাথে তুলনা করা একেবারেই নগণ্য।

— রাস্ট

আপনি কীভাবে অ্যাজাক্স অনুরোধটি করার চেষ্টা করছেন তার উপর নির্ভর করে, এক্ষেত্রে আপনার জবাবের জন্য আপনার সত্যিকারের সমস্ত ডাব্লুপি কোরের দরকার নেই, সর্বোত্তম কেস দৃশ্যে কেবল $ wpdb লোড করা এবং আপনার ক্ষেত্রটি অনুসন্ধান করা হবে। তবে সম্মত হন, ডাব্লুপি অ্যাজাক্স ইউআরএলটি ব্যবহার করে উভয়ই ভালভাবে পরিচালনা না করে কোনও সমস্যার দিকে ঝুঁকতে পারে।

— ওয়েবর্ড

হ্যাঁ, আমি কেবল লক্ষ করছি যে মাইএসকিউএল পারফরম্যান্সটি কোনও বাধা হয়ে দাঁড়াবে না (যদি আপনি কয়েক হাজার পোস্ট এবং এ জাতীয় পোস্টে না প্রবেশ করেন)। ডব্লিউপি কোর অনেক ধীর। নেটওয়ার্কও ধীর।

— রাস্তার

হ্যাঁ, তবে ডাব্লুপি কোর মেশিনগুলির সাথে কিছু ধরণের স্ক্যালিং করা অনেক সহজ এবং দ্রুত। মাইএসকিউএল মেশিনগুলির সাথে ধীর এবং শক্ত। তবে একটি সাধারণ ইনস্টলেশন, আমি আপনার সাথে একমত।

— ওয়েবর্ড