bold matched word in autocomplete jquery with loader

By
<div class="col-md-12 search_panel">
               <form>
               <input type="text "class=>"txt-search" name="search">
                <span class="autocomplete-animation"><img id="ajaxanimation" src="../assets/loader.gif")/></span>
                </form>
            </div>

<script >
$(document).ready(function(){
    var termTemplate = "<span class='ui-autocomplete-term'>%
s</span>";

var availableTags =
[
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( ".txt-search" ).autocomplete({
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( availableTags, function(item,index){
            return matcher.test(item);
        });
        responseFn( a.slice(0, 5) );
      },
  select: function(event, ui){
        $('.txt-search').val(ui.item.value);
        $(".search-form").submit()
    },
    search  : function(){$('.autocomplete-animation').show();},
    open: function (e, ui) {
            var
            acData = $(this).data('autocomplete'),           
                styledTerm = termTemplate.replace('%s', acData.term);
                acData.menu.element.find('a')
                    .each(function () {
                    var me = $(this);
                    count = $(styledTerm).text().split("").length
                   
                    check_element=""
                    $($(me).text().split("")).each(function( index, element ) {
                        if(index==0 && count==1){
                            check_element="<span class='ui-autocomplete-term'>"+element+"</span>"
                        }
                        else if(index==0){
                            check_element="<span class='ui-autocomplete-term'>"+element
                        }else if(index==count-1){
                             check_element+=element+"</span>"
                        }else{
                            check_element+=element
                        }
                      });                  
                     $(me).html(check_element);
                     setTimeout(
                      function()
                      {
                        //do something special
                        $('.autocomplete-animation').hide();

                      }, 1000);
                                        
                });
        }
});
});

</script>
Experienced Ruby on Rails and Web Developer having 11+ years experience in Ruby & Ruby on Rails framework, TTD, Rspec. Expert on Git, SVN , Git Hook, Bitbucket. I use MySQL, MongoDB , PostgreSQL & Sqlite for Database Management. In front-end development I use HTML5 / HAML, CSS3 / SCSS, javascript / coffeescript. I also know about the deploy the applications on VPS Server i.e AWS EC2, Heroku, Ditital Ocean, Hostgator, Site5, BlueHost, AWS Load Balancing, Elastic Beanstalk, AWS S3 e.t.c ☆ Frameworks ☆ Ruby on Rails, Sinatra ☆ Database ☆ - PostgreSQL, MySQL, SQLite, - MongoDB, Amazon DynamoDB,AWS RDS. ☆ Front end Techniques ☆ - ReactJS, Angular js, Node js, Javascript, JQuery, HTML, CSS - Twitter Bootstrap, Coffeescript. Why hire me? * Master degree in Computer Science * 6 years professional experiences and 10+ projects completed * Available all day long, 7 days/24 hours * Good communication skills with fluent English * Self-motivated, fast-learner and "I can do" mind * Quality insurance and fast delivery

Comments

Post a Comment

Popular Posts

How to pass hash in Postman

By
By the looks of what you are trying to send, you need to change the Grape restriction, because destinations is an Array , not a Hash : requires : destinations , type : Array   You don't need the "destination" hash when sending the request: { destinations => [ { name => 'dest1' , other_attribute : 'value' , etc ... }, { name => 'dest2' , other_attribute : 'value' , etc ... }, { name => 'dest3' , other_attribute : 'value' , etc ... } ]}   This creates an Array of hashes. In order to send this through POSTMAN, you'll need to modify that destinations param your sending and add multiple lines in POSTMAN. Something like: destinations [][ name ] 'dest1' destinations [][ other_attribute ] 'value1' destinations [][ name ] 'dest2' destinations [][ other_attribute ] 'value2'...
Read more

nginx: unrecognized service

By
The nginx: unrecognized service error means the startup scripts need to be created. Fortunately the startup scripts have already been written. We can fetch them with wget and set them up following these steps: # Download nginx startup script wget -O init-deb.sh https://www.linode.com/docs/assets/660-init-deb.sh # Move the script to the init.d directory & make executable sudo mv init-deb.sh /etc/init.d/nginx sudo chmod +x /etc/init.d/nginx # Add nginx to the system startup sudo /usr/sbin/update-rc.d -f nginx defaults Now we can control nginx using: sudo service nginx stop sudo service nginx start sudo service nginx restart sudo service nginx reload
Read more

Bootstrap Select Picker append add new item if search not exist

By
  <select class = "selectpicker" data-live-search= "true" id= "branch" multiple> < option > B.Tech </ option > < option > M.Tech </ option > < option > Ph.D </ option > </select> jQuery script $( '.selectpicker' ). selectpicker ({ noneResultsText : 'No result found <button class="btn btn-dark" onclick=(add_opt(this))>Add new option</button>' }); function add_opt ( event ){ var value = $(event). parents ( 'div' ). siblings ( '.bs-searchbox' ). find ( 'input' ). val (); $(event). parents ( 'div' ). siblings ( '.selectpicker' ). append ($( "<option></option>" ). text (value)). val (value); $( '.selectpicker' ). selectpicker ( 'refresh' ); }
Read more

Reading Excel Sheets using "Roo" gem in ruby on rails

By
This gem allows you to read the contents of Open-office spreadsheets (.ods) Excel spreadsheets (.xls) Google (online) spreadsheets Excel's new file format .xlsx How to use this gem : 1) Install            [sudo] gem install roo 2) Create an instance of the excel sheet file                      require 'rubygems'         require 'roo'                 s =  Roo:: Openoffice.new("myspreadsheet.ods")         s =  Roo:: Excel.new(" myspreadsheet.xls ")          s =  Roo:: Google.new(" myspreadsheet_at_google ")         s =  Roo:: Excelx.new(" myspreadsheet.xlsx ")      3)  Reading from a particular sheet of the spreadsheet:      Lets say your spreadsheet has 4 s...
Read more

Add CORS to Nginx on AWS Elastic Beanstalk

By
Image
Apache Add the following block to your  .htaccess  file: <FilesMatch ".(eot|otf|ttf|woff|woff2)"> Header always set Access-Control-Allow-Origin "*" </FilesMatch> Nginx Add the following location block to your virtual host file (usually within the server directive) and reload Nginx: location ~* \.(eot|otf|ttf|woff|woff2)$ { add_header Access-Control-Allow-Origin *; } Invalidate CloudFront Distribution Once the changes have been made you will need to  invalidate the CloudFront cache  with a path of “/*”. Integrating to CloudFront service It’s simple to config and use CloudFront (a CDN service) for Rails app.  Just one thing from my experience, regarding to CORS issue on EB when your CSS want get loading font files or font-awesome. Because EB run your app with Nginx server serve public static files, then work around would be overwriting web server config in Nginx with  add_header Access-Control-Allow-Origin ‘*’...
Read more

Enable gzip compression on Elastic Beanstalk with nginx

By
Create nginx_gzip_configuration.config file into .ebextensions directory and then put the following script. files:   "/etc/nginx/conf.d/gzip.conf":       mode: "644"       owner: "root"       group: "root"       content: |         # enable gzip compression         gzip on;         gzip_min_length  1100;         gzip_buffers  4 32k;         gzip_types    text/plain text/html text/xml text/css application/javascript application/json;         gzip_vary on;         # end gzip configuration container_commands:   02_restart_nginx:     command: service nginx restart
Read more

Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

By
If you are trying to connect mysql using password or without password like mysql -u USERNAME or mysql -u USERNAME -p PASSWORD and getting error:-   Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) find first socket location sudo find / -type s my be location would be /tmp/mysql.sock just go in the mysql file my.cnf sudo nano  /etc/mysql/my.cnf and do changes in scocket port            = 3306 socket          = /tmp/mysql.sock [mysqld_safe] socket          = /tmp/mysql.sock nice            = 0 Restart mysql, sudo /etc/init.d/mysql restart And try login again mysql -u USERNAME Hope it will work. Command to know all the mysql variable sudo mysqladmin variables To know mysql socket path mysqld --verbose --help | ...
Read more

Get video duration by URL in Ruby on Rails

By
First install ffmpeg on your system  http://ffmpeg.org/download.html OR sudo add-apt-repository ppa:mc3man/trusty-media And confirm the following message by pressing <enter>: Also note that with apt-get a sudo apt-get dist-upgrade is needed for initial setup & with some package upgrades More info: https://launchpad.net/~mc3man/+archive/ubuntu/trusty-media Press [ENTER] to continue or ctrl-c to cancel adding it Update the package list. sudo apt-get update sudo apt-get dist-upgrade Now FFmpeg is available to be installed with apt: sudo apt-get install ffmpeg In Controller: your_video_path =  https://s3-us-west-2.amazonaws.com/its-get-brighter-staging/uploads/video/video/2/Planking.mp4 result = `ffmpeg -i #{your_video_path} 2>&1` videotime = result.match("Duration: ([0-9]+):([0-9]+):([0-9]+).([0-9]+)")[0].split("Duration: ").last.split(".").first
Read more

Deploy Reatjs app on Heroku

By
1. React JS app npm install -g create-react-app create-react-app my-app cd my-app git init heroku create -b https://github.com/mars/create-react-app-buildpack.git git add . git commit -m "react-create-app on Heroku" git push heroku master heroku open OR if you already have app created then add  mars/create-react-app then set heroku buildpacks:set mars/create-react-app 2. If following error coming then set bundle path:  ls: cannot access '/app/build/static/js/*.js': No such file or directory 2019-12-23T07:49:22.901124+00:00 app[web.1]: Error injecting runtime env: bundle not found '/app/build/static/js/*.js'. See: https://github.com/mars/create-react-app-buildpack/blob/master/README.md#user-content-custom-bundle-location heroku config:set JS_RUNTIME_TARGET_BUNDLE='/app/dist/*.js' Make sure your bundle into directory /app/dist OR if you have your bundle into other directory then set other directory pa...
Read more