Jquery Selectize अजाक्स

Question

विकल्पों के शीर्ष पर "सभी साफ़ करें" लिंक जोड़ें I Jquery's Selectize टैगिंग लाइब्रेरी का उपयोग कर रहा हूं जो अब तक मेरे लिए अच्छा काम करता है।

नीचे कोड मैंने उपयोग किया है।

जावास्क्रिप्ट कोड:

$('#q').selectize({ 
    plugins: ['remove_button'], 
    valueField: 'address', 
    labelField: 'address', 
    searchField: 'address',     
    create: true,  
    render: { 
     item: function(data, escape) { 
      return '<div>' + escape(data.address) + '</div>'; 
     } 

    }, 
    onChange: function(value) { 
     $(".selectize-input input[placeholder]").attr("style", "width: 100%;"); 
    }, 
    load: function(query, callback) { 
     if (!query.length) return callback(); 
     $.ajax({ 
      url: base_url + '/search-property-autocomplete', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       q: query, 

      }, 
      error: function() { 
       callback(); 
      }, 
      success: function(res) { 
       console.log(res.properties); 
       callback(res.properties); 
      } 
     }); 
    } 
}); 

पीएचपी कोड:

/* API for autocomplete list of properties */ 
Route::post('/search-property-autocomplete', function() { 
    if (!empty(trim($_POST['q']))) { 
     $search_term = trim($_POST['q']); 


     // getting Suburb State and Postcode of the properties based on search 
     $query = Property::join('technobrave_suburbs_', function($join) { 

        $join->on('technobrave_properties_.suburb_id', '=', 'technobrave_suburbs_.id'); 
       }); 

     $query->join('technobrave_states_', function($join) { 
      $join->on('technobrave_properties_.state_id', '=', 'technobrave_states_.id'); 
     }); 


     $query->select('technobrave_properties_.*', 'technobrave_suburbs_.suburb', 'technobrave_states_.state_name'); 

     $query->where(function($query) use ($search_term) { 
      $query->where('technobrave_properties_.post_code', 'LIKE', '%' . $search_term . '%'); 
      $query->orwhere('technobrave_suburbs_.suburb', 'LIKE', '%' . $search_term . '%'); 
      $query->orwhere('technobrave_states_.state_name', 'LIKE', '%' . $search_term . '%'); 
     }); 
     $data = $query->take(8)->get(); // getting maximum 8 records only 

     if ($data) { 
      foreach ($data as $current_record) { 
       $result[] = array(
        'address' => $current_record->suburb . ' ' . $current_record->state_name . ' ' . $current_record->post_code 
       ); 
      } 
     } 
    } else { 
     $result = []; 
    } 
    echo json_encode(array('properties' => $result)); 
}); 

आप कोड ऊपर में देख सकते हैं, मैं अजाक्स का उपयोग कर रहा डेटा को भरने के लिए और मेरे php फोन करके रिकॉर्ड हो रही समारोह जो बिल्कुल ठीक काम कर रहा है।

अब, मैं अपने सभी परिणामों के शीर्ष पर एक हाइपरलिंक के रूप में एक आइटम जोड़ना चाहता हूं जैसे सभी साफ़ करें जो हर बार जब मैं अपने इनपुट-बॉक्स में खोज या टाइप करता हूं तो आ जाएगा।

और यदि मैं पर क्लिक करता हूं तो सभी लिंक साफ़ करें, नीचे दिए गए परिणाम साफ़ किए जाने चाहिए।

Selectize द्वारा प्रदान की clearoptions() घटना का उपयोग करने के लिए, मैं अद्यतन किया है मेरी create: के साथ अपने जावा स्क्रिप्ट कोड में:

create: function(input, callback) { 

    $.ajax({ 
     url: base_url + '/search-property-autocomplete', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
      q: query, 

     }, 
     error: function() { 
      callback(); 
     }, 
     success: function(res) { 

      return callback({ address: "<a href='javascript:void(0)'>Clear All</a>" }); 

     } 
    }); 


}, 

लेकिन यह के रूप में मैं वहाँ मेरे अतिरिक्त विकल्प देखने के लिए असमर्थ हूँ काम नहीं कर रहा है। मेरे परिणाम पॉप्युलेट होने के बाद मैं अपने हाइपरलिंक को देखने में असमर्थ हूं।

मुझे पहले से ही पता है कि नीचे दिए गए कोड जैसे somethink का उपयोग करने से मुझे पता चलने के बाद मेरे आबादी वाले रिकॉर्ड हटा दिए जाएंगे।

$('.my-hyperlink-custom-class').on('click', function() { 
    control.clearOptions(); 
}); 

लेकिन मैं इस नए आइटम को अपने कोड में जोड़ने या दबाकर परिणामों को अजाक्स का उपयोग करके पॉप्युलेट कर रहा हूं।

क्या कोई मुझे मार्गदर्शन कर सकता है कि मैं इसे कैसे प्राप्त कर सकता हूं।

Answer 1

सहायता और समर्थन के लिए सभी को बहुत बहुत धन्यवाद। और इस सुविधा को लागू करने के लिए @afeique के संकेत के लिए विशेष धन्यवाद।

यहां समाधान है जो मैं अंत में आया था।

$('#q').selectize({ 
    plugins: ['remove_button'], 
    valueField: 'address', 
    labelField: 'address', 
    searchField: 'address',     
    create: true,  
    render: { 
     item: function(data, escape) { 
      return '<div>' + escape(data.address) + '</div>'; 
     } 

    }, 
    onChange: function(value) { 
     $(".selectize-input input[placeholder]").attr("style", "width: 100%;"); 
    }, 
    load: function(query, callback) { 
     if (!query.length) return callback(); 

     // Appending only if not exists 
     if($('.clearAllSuggestions').length == 0) { 
      $(".selectize-dropdown").append('<a href="#" class="clearAllSuggestions">Clear All</a>'); 
     } 
     $.ajax({ 
      url: base_url + '/search-property-autocomplete', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       q: query, 

      }, 
      error: function() { 
       callback(); 
      }, 
      success: function(res) { 
       console.log(res.properties); 
       callback(res.properties); 
      } 
     }); 
    } 
}); 


$('body').on('click', '.clearAllSuggestions', function() { 

    var $select = $('#q').selectize({}); 
    var control = $select[0].selectize; 
    control.clearCache('option'); 
    control.clearOptions(); 
    control.refreshOptions(true); 
}); 

मैं थोड़ा मेरे कोड को संशोधित किया है और मेरे load घटना में कोड के नीचे डाल संलग्न करने के लिए "सभी को साफ़ करें" मेरे सुझाव टैग विकल्पों में एंकर टैग।

// Appending only if not exists 
     if($('.clearAllSuggestions').length == 0) { 
      $(".selectize-dropdown").append('<a href="#" class="clearAllSuggestions">Clear All</a>'); 
     } 

फिर, मैं बस कैश और विकल्पों को साफ़ करना चाहता था इसलिए मैंने कोड नीचे रखा।

$('body').on('click', '.clearAllSuggestions', function() { 

    var $select = $('#q').selectize({}); 
    var control = $select[0].selectize; 
    control.clearCache('option'); 
    control.clearOptions(); 
    control.refreshOptions(true); 
}); 

उम्मीद है कि इससे मदद मिलती है।

Answer 2

यहां लिखी गई स्क्रिप्ट है। यह javascript:; के साथ चयनित 0 के ऊपर सभी href विशेषता को बदल देगा जबकि नीचे वाला एक ही रहेगा। आप इसे अपनी आवश्यकता के अनुसार संशोधित कर सकते हैं।

$(".row").click(function(){ 
 
var present = $(this).index(); 
 
console.log("present"+present) 
 
$(this).closest('.container').find('.row').each(function(index,element){ 
 
    console.log("eachindex"+$(this).index()); 
 
    \t if($(this).index()>=present) { 
 
    \t 
 
    } 
 
    else { 
 
    \t $(this).attr("href","javascript:;"); 
 
    } 
 
}) 
 
$(".row").each(function(){ 
 
    \t $("#finalAttribute").append($(this).attr("href")); 
 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <a class="row row1" href="#1"> 
 
    R1 
 
    </a> 
 
    <br/> 
 
    <a class="row row2" href="#2"> 
 
    R1 
 
    </a> 
 
    <br/> 
 
    <a class="row row3" href="#3"> 
 
    R2 
 
    </a> 
 
    <br/> 
 
    <a class="row row4" href="#4"> 
 
    R3 
 
    </a> 
 
    <br/> 
 
      <a class="row row5" href="#5"> 
 
    R4 
 
    </a> 
 
    <br/> 
 
</div> 
 
<div id="finalAttribute"> 
 

 

 
</div>

Answer 3

मुझे माफ कर दो, मैं Selectize के साथ अनुभव नहीं है, लेकिन मैं उनके examples की जांच करके कुछ है कि सहायक हो सकता है देखा था:

$('#input-tags3').selectize({ 
    plugins: ['remove_button'], 
    delimiter: ',', 
    persist: false, 
    create: function(input) { 
     return { 
      value: input, 
      text: input 
     } 
    } 
}); 

इस उदाहरण में, create: में प्रोटोटाइप function(input) है जिसमें केवल एक तर्क है और कोई कॉलबैक फ़ंक्शन नहीं है। आपका कोड निम्न प्रोटोटाइप का उपयोग कर रहा है: create: function(input, callback)। चयन उदाहरणों से, मैंने केवल load:function(input, callback) का उपयोग किया है।

मैं की तर्ज पर कुछ करने के लिए अपने create: फेरबदल सुझाव है:

create: function(input) { 
    // append "clear all" anchor to top of search div 
    $("#searchDiv").append('<a href="#" class="clearAll">Clear All</a>') 

    // perform autocomplete AJAX 
    $.ajax({ 
     url: base_url + '/search-property-autocomplete', 
     type: 'POST', 
     dataType: 'json', 
     data: { 
      q: query, 

     }, 
     error: function() { 
      // add text 
      return input; 
     }, 
     success: function(res) { 
      // TODO: do something to display the autocomplete results 
      // e.g. create a dropdown with autcomplete suggestions 
      // TODO: handle user selecting one of the suggestions 

      // add text 
      return input; 
     } 
    }); 


}, 

और आवश्यक TODO रों भरें आप इच्छा कार्यक्षमता प्राप्त करने के लिए।

HTH

Answer 4

आप क्या हासिल करने की कोशिश कर रहे हैं थोड़ा अलग तरीके से किया जा सकता है। का उपयोग कॉलबैक नए आइटम बनाएगा जो विकल्पों की प्रारंभिक सूची में नहीं हैं जब आप जोड़ें चुनते हैं ... विकल्प शीर्ष पर दिखाया गया है। यह वही नहीं है जो आप चाहते हैं।

बस कोशिश:

var $select = $('#q').selectize({ 
    plugins: ['remove_button'], 
    valueField: 'address', 
    labelField: 'address', 
    searchField: 'address',     
    create: false, 
    score: function() { return function() { return 1; }; }, 
    render: { 
     item: function(data, escape) { 
      return '<div>' + escape(data.address) + '</div>'; 
     } 

    }, 
    onChange: function(value) { 

     if(value == 'Clear All') { 
      var control = $select[0].selectize; 
      control.clearOptions(); 
     } 
    }, 
    load: function(query, callback) { 
     if (!query.length) return callback(); 
     $.ajax({ 
      url: base_url + '/search-property-autocomplete', 
      type: 'POST', 
      dataType: 'json', 
      data: { 
       q: query, 

      }, 
      error: function() { 
       callback(); 
      }, 
      success: function(res) { 
       // add the clear All option on top. 
       res.properties.unshift({address: "Clear All" }); 
       callback(res.properties); 
      } 
     }); 
    } 
}); 

यह एक अतिरिक्त विकल्प कहते हैं और जब चयनित विकल्प स्पष्ट करने के onChange घटना का उपयोग करता है।

स्कोर विकल्प भी नोट करें, ताकि डिफ़ॉल्ट फ़िल्टरिंग अक्षम हो।

Answer 5

क्या आप इस विधि को आजमा सकते हैं, मेरा मानना ​​है कि आपकी समस्या डीओएम प्रतिपादन और बाध्यकारी जेएस कार्यों के साथ है। चूंकि तत्व लोड पर उपलब्ध नहीं है, इसलिए तत्व जावास्क्रिप्ट से बंधे नहीं जा सकता है। नीचे विधि काम करेगा।

$('body').on('click', '.my-hyperlink-custom-class', function() { 
    control.clearOptions(); 
}); 

यहाँ मैं शरीर के लिए समारोह के लिए बाध्य कर दिया है है, लेकिन फिर से जाँच im अगर लक्ष्य तत्व .my-हाइपरलिंक-कस्टम वर्ग है।