Uly.me

cloud engineer

search

Ajax Live Search

Just implemented an Ajax live search on a website.

Here’s the search page. Results are displayed in div output.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#search").keyup(function(){
        var query = $(this).val();
        if (query != "") {
        $.ajax({
            url: 'links-ajax.php',
            method: 'POST',
            data: {query:query},
            success: function(data){
            $('#output').html(data);
            $('#output').css('display', 'block');
            $("#output a").on("click", function(){
                $("#output").val($(this).html());
            });
            $("#search").focusout(function(){
                window.setTimeout(function() {
                $('#output').css('display', 'none');
                }, 500);
            });
            $("#search").focusin(function(){
                $('#output').css('display', 'block');
            });
            }
        });
        } else {
        $('#output').css('display', 'none');
    }
    });
});
</script>
 
<div class="form-row">
    <div class="col">
        <input type="text" name="search" id="search" autocomplete="off" placeholder="Search here...." class="form-control form-control-success">
    </div>
</div>
<div id="output"></div>

Here’s the links-ajax.php which display the search results with links.

<?php
$servername='localhost';
$username='';
$password='';
$dbname = "";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn) { die('Could not Connect MySql Server:' .mysql_error()); }
if (isset($_POST['query'])) {
    $query = <<<"SQL
                 SELECT * FROM links WHERE `name` LIKE '%{$_POST['query']}%' 
                 OR `url` LIKE '%{$_POST['query']}%' 
                 OR `tag` LIKE '%{$_POST['query']}%' 
                 ORDER BY name ASC, url ASC"
             SQL;
    $result = mysqli_query($conn, $query);
    if (mysqli_num_rows($result) > 0) {
        while ($user = mysqli_fetch_array($result)) {
            echo "<a target='_blank' rel="noopener">".$user['name']."</a><br/>";
        }
    } else {
        echo "<p style='color:red'>No results found...</p>";
    }
}
?>

I couldn’t get the links working, until I added the 500ms of timeout in .focusout.

Vi Search and Replace

How to do search and replace in Vim.

Search for “foo” and replace it with “bar” in the current line. Use :s

:s/foo/bar/g

Search for “foo” and replace it with “bar” in the entire document. Use :%s

:%s/foo/bar/g

You can also pipe instead of forward slash. Useful if your search contains a /.

:%s|foo/|bar|g

AWS Search for RDS

Here’s a simple way to search for a RDS instance in AWS via CLI.

aws rds describe-db-instances \
--db-instance-identifier rds-instance-name \
--region us-east-1 \
--profile my-account

You may have to cycle through accounts and regions to find it.

MySQL Select Like

Here’s how to perform SQL searches using the like operator.

# Format
SELECT column1, column2 FROM table_name WHERE column LIKE pattern;
# Search for an entry starting with a 'joe.'
SELECT id,username,address FROM users WHERE username LIKE 'joe%';
# Search for an entry ending with a 'joe.' 
SELECT id,username,address FROM users WHERE username LIKE '%joe';
# Search for any entry with 'joe' from any position. 
SELECT id,username,address FROM users WHERE username LIKE '%joe%';
# Finally, using "_" as wildcards. Find any field with "j" in the second position.
SELECT id,username,address FROM users WHERE username LIKE '_j';

Center Search Widget

Here’s how to center the Search widget in a WordPress Page or a post. This applies only if you’re using the default Search Widget. Div classes may vary based on theme being used. The CSS example below may not work for your theme. Check your theme’s source code to be sure.

.entry-content .wp-block-search {
  display:block;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}
.entry-content .wp-block-search label {
  display:none;
}
.entry-content .wp-block-search input {
  width:250px;
}

The CSS above centers the search block. It suppresses the search label, and finally sets the form’s input to a fixed width of 250px.

AWS Security Groups IP Cidr

Here’s how to search for AWS Security Groups containing this IP Cidr.

aws ec2 describe-security-groups \
--filter Name=egress.ip-permission.cidr,Values='10.8.8.8/32' \
--query "SecurityGroups[*].{Name:GroupName}" \
--output text \
--profile default \
--region us-east-1

Search with ports.

aws ec2 describe-security-groups \
--filter Name=egress.ip-permission.cidr,Values='10.8.8.8/32' \
         Name=egress.ip-permission.from-port,Values='22' \
         Name=egress.ip-permission.to-port,Values='22' \
--query "SecurityGroups[*].{Name:GroupName}" \
--output text \
--profile default \
--region us-east-1

Query will only display the Security Group name.