लाइव ऑटोफिल खोज कैसे बनाएं?

Question

मैं वर्तमान में एक वर्डप्रेस खोज फ़ंक्शन बनाने की कोशिश कर रहा हूं जो खोज बार के नीचे लाइव परिणाम दिखाता है। विश्व बैंक पर एक उदाहरण है वेबसाइट (नीचे स्क्रीन) । मैं एक ऐसी ऑटोफिल की तलाश नहीं कर रहा हूं, जो आपको Google.com पर मिलेगी जो आपके द्वारा लिखे गए शब्दों को पूरा करती है, बल्कि मैं चाहता हूं कि यह साइट पर वास्तविक पोस्ट ढूंढे।

मैंने वर्डप्रेस आंसर और अन्य समान संसाधनों के माध्यम से एक स्क्रब करने की कोशिश की, लेकिन केवल एक Google प्रकार की खोज को लागू करने में चला गया है जो कि मैं नहीं खोज रहा हूं। किसी भी मदद या सही दिशा में अंक बहुत सराहना की जाएगी।

Comments

जब उपयोगकर्ता सुझाव पर क्लिक करता है तो आप क्या करना चाहते हैं? बस इसके साथ खोज बॉक्स भरें?

— रारस्ट

आपको संबंधित पोस्ट पर ले जाता है। उपयोगकर्ता अभी भी टाइप कर सकते हैं और सामान्य रूप से खोज परिणाम प्राप्त कर सकते हैं, केवल क्लिक करने से सुझाव पोस्ट पर निर्देशित होंगे।

— 9

मेरे पास भरने के लिए त्वरित समाधान है, लेकिन अधिक समस्याग्रस्त को जोड़ना ... इसके बारे में सोचेंगे।

— रारस्ट

Answer 1

निम्नलिखित jQuery UI स्वतः पूर्ण का उपयोग करता है, जिसे 3.3 के बाद से वर्डप्रेस में शामिल किया गया है। (मैंने @Rarst : D से प्रारूप उधार लिया है )।

यह अभी भी ठीक नहीं है कि आप क्या कर रहे हैं, लेकिन आपको एक अच्छा प्रारंभिक बिंदु देता है। निम्नलिखित एक मूल jQuery यूआई स्टाइल का उपयोग करता है, लेकिन आप वर्तमान में ट्रैक पर काम करने वाले और अपने प्लग-इन फ़ोल्डर से कॉल कर सकते हैं।

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.jsAjax के लिए देशी , WP कोर का उपयोग करता है और डिफ़ॉल्ट खोज फ़ॉर्म (अनमॉड 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

आप इसे अजाक्स का उपयोग करके अवश्य करें, लेकिन यहां एक समस्या है। चूंकि वर्डप्रेस MySQL का उपयोग करता है, आप खोज के साथ अपने सर्वर पर तनाव कर सकते हैं यदि आप वास्तविक डेटाबेस प्रश्नों को अजाक्स के साथ खोज को भरने की कोशिश करते हैं, लेकिन आप जो कर सकते हैं वह एक प्रणाली विकसित करना है जहां सभी पोस्ट एक बड़े "wp_options" में सहेजे जाते हैं फ़ील्ड और फिर जब कोई खोज की जाती है तो आप वास्तविक खोज करने के बजाय उससे क्वेरी करते हैं। लेकिन याद रखें कि जब भी आप पोस्ट बनाते हैं या संपादित करते हैं, तो आपको इस पाठ / क्रमबद्ध चर के इस हिस्से को अपडेट करने की आवश्यकता होती है।

यदि आप इस समाधान को विकसित करने के लिए कुछ समय बिताने के लिए तैयार नहीं हैं, तो मैं आपको इस तरह की "लाइव खोज" करने की सलाह नहीं दूंगा।

Comments

इस तरह के उपयोग के मामले में MySQL अनुरोधों का संसाधन उपयोग पूरी तरह से महत्वहीन होगा जो Ajax अनुरोधों के लिए WP कोर लोड करने के हिट की तुलना में होगा।

— रारस्ट

इस बात पर निर्भर करता है कि आप अजाक्स अनुरोध कैसे कर रहे हैं, इस मामले में आपको वास्तव में अपने उत्तर के लिए सभी WP कोर की आवश्यकता नहीं है, सबसे अच्छा मामला परिदृश्य सिर्फ $ wpdb लोड करने और अपने क्षेत्र की खोज करने के लिए होगा। लेकिन सहमत, मुख्य WP अजाक्स यूआरएल का उपयोग करते हुए दोनों एक समस्या में बदल सकते हैं, अगर अच्छी तरह से संभाला न जाए।

— वेबर

हां, मैं सिर्फ यह ध्यान दे रहा हूं कि MySQL का प्रदर्शन अड़चन नहीं होगा (जब तक कि आप सैकड़ों हजारों पदों और इस तरह से नहीं मिलते)। WP कोर बहुत धीमी है। नेटवर्क भी धीमा है।

— रार्स्ट

हां, लेकिन WP कोर मशीनों के साथ स्कैलिंग के कुछ प्रकार करना बहुत आसान और तेज है। MySQL मशीनों के साथ धीमी और कठिन है। लेकिन एक सामान्य स्थापना पर, मैं आपसे सहमत हूं।

— वेबर