Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function( $ ) {
- $(function() {
- // Custom autocomplete instance.
- $.widget( "app.autocomplete", $.ui.autocomplete, {
- // Which class get's applied to matched text in the menu items.
- options: {
- highlightClass: "ui-state-highlight"
- },
- _renderItem: function( ul, item ) {
- // Replace the matched text with a custom span. This
- // span uses the class found in the "highlightClass" option.
- var re = new RegExp( "(" + this.term + ")", "gi" ),
- cls = this.options.highlightClass,
- template = "<span class='" + cls + "'>$1</span>",
- label = item.label.replace( re, template ),
- $li = $( "<li/>" ).appendTo( ul );
- // Create and return the custom menu item content.
- $( "<a/>" ).attr( "href", "#" )
- .html( label )
- .appendTo( $li );
- return $li;
- }
- });
- var autocompleteTextbox = '<div class="autocomplete-search autocomplete-search-open">'
- +'<a href="#" class="st-btn01 autocomplete-search-icon"><i class="search-icon" aria-hidden="true"></i></a>'
- +'<div class="autocomplete-search-sub1">'
- +'<form role="search" method="get" action="<?php echo esc_url( home_url( '+"/"+' ) ); ?>">'
- +'<input type="text" name="s" class="form01 autocomplete-search-input" id="autocomplete-search-input" placeholder="Type something" autocomplete="off">'
- +'<a href="#" class="st-btn02 autocomplete-search-icon"><i class="searchx-icon" aria-hidden="true"></i></a>'
- +'</form>'
- +'</div>'
- +'</div>';
- var appendElement = function(){
- $('.st-navbar-collapse').append(autocompleteTextbox);
- $(this).unbind('click');
- $(".st-search .st-btn01 .search-icon").addClass('text-visibility');
- };
- $(".two-brokers").parent('a').on('click',appendElement);
- var removeElement = function(){
- $(this).parents('.autocomplete-search').remove();
- $(".two-brokers").parent('a').bind('click',appendElement);
- $(".st-search .st-btn01 .search-icon").removeClass('text-visibility');
- };
- $("body").on("click",".st-btn02.autocomplete-search-icon",removeElement);
- var searchRequest,timeoutRequest;
- $("body").on("keyup",".autocomplete-search-input",function(){
- clearTimeout(timeoutRequest);
- var _this = $(this);
- timeoutRequest = setTimeout(function(){
- // create an jq-ui autocomplete on your selected element
- _this.autocomplete({
- minChars: 2,
- highlightClass: "bold-text",
- // use a function for its source, which will return ajax response
- source: function(request, response){
- try { searchRequest.abort(); } catch(e){}
- // well use postautocomplete_search.ajax_url which we enqueued with WP
- $.post(postautocomplete_search, {
- action: 'get_test_pages', // our action is called search
- term: request.term // and we get the term form jq-ui
- }, function(data) {
- if(!data.length){
- var result = [{
- label: 'No matches found',
- value: response.term
- }];
- response(result);
- }else{
- response(data);
- }
- }, 'json');
- },
- select: function( evt, ui ) {
- evt.preventDefault();
- window.location = ui.item.link;
- }
- });
- },100);
- });
- });
- })( jQuery );
Add Comment
Please, Sign In to add comment