content logo

Bootstrap Search Boxes:

Bootstrap Search for Selected Text

Are you looking for a unique and special way to improve your website as the owner? Do you want your website to stand out among the others for its really amazing features? Search bars are among the most commonly used features on any website but most websites only have a normal search field where users can type what they need and the system shows them the results. It gets the job done but why keep it there?

In this post, we have a truly unique Bootstrap smart search. You can use the CSS search result code available in the next section of the page and place a search box at the top of your web pages. The code works in such a way that when a user wishes to search for a certain keyword, they select it in the text they need to search which then opens a new search box where the word you have selected is already typed in it automatically. You can then press go to do the search. You can also stop the Bootstrap Search Modal from opening automatically whenever you select a text. This is a really unique way to implement a search box into your website and will surely catch many people’s attention. It is quite useful if you want to quickly search selected text.

#

CSS Search Result

#

Search Selected Text

#

Bootstrap Smart Search

#

Bootstrap Modal Search

<!-- This script got from frontendfreecode.com -->
<div class="container pt-4 pb-4">
    <div class="alert alert-info">
        <strong>Select max 3 words</strong> in the content to open the search modal
    </div>
    <div class="main-content">
        <h1>Bootstrap search selected text</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero turpis, volutpat vitae metus eu, ultricies hendrerit ante. Sed commodo ornare velit ut consectetur. Sed blandit tellus lacus, nec luctus ex interdum a. Nulla vestibulum vehicula
            metus ac malesuada. Proin est tortor, bibendum eget placerat eget, mattis sed augue. Curabitur nec fringilla est, volutpat luctus magna. Mauris commodo scelerisque elit, vel posuere turpis lacinia id. Aenean facilisis at ligula pulvinar lobortis.
            Donec feugiat lectus ac orci posuere, in ullamcorper lorem congue. Pellentesque congue sem ante, eu placerat nulla consectetur eget. Vivamus iaculis sed magna vitae interdum. Maecenas pharetra ultricies velit. Aenean porta erat vitae justo dapibus
            feugiat quis eget felis. Donec lorem nulla, dignissim eu interdum sit amet, fermentum in nunc. Curabitur in nulla eu nibh aliquam sodales dictum ut nisl.
        </p>

        <p>
            Pellentesque iaculis hendrerit vehicula. In hac habitasse platea dictumst. Nam porttitor justo in euismod elementum. Donec mi turpis, pretium eget egestas ac, vestibulum sed quam. Integer auctor felis diam, et tincidunt neque tincidunt a. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed tellus facilisis lorem tristique blandit.
        </p>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="SearchModal" tabindex="-1" role="dialog" aria-labelledby="SearchModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Selected Text</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <input type="text" class="form-control input-search" placeholder="Search for..." aria-label="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-secondary" type="button">Go!</button>
                    </span>
                </div>
            </div>
            <div class="modal-footer">
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Stop opening Search Modal on select text</span>
                </label>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
var nbrwords = 3;
var SearchModalCookie = location.host + "-SearchModal";
$('.main-content').mouseup(function () {
    var text = getSelectedText();
    var words = text.split(' ');
    if (text != '' && words.length <= nbrwords && jQuery.cookie(SearchModalCookie) == undefined) {
        $('#SearchModal').find('.modal-body .input-search').val(text);
        $('#SearchModal').modal("show");
    }
});
$('#SearchModal').on('hidden.bs.modal', function (e) {
    if ($(this).find($('input[type=checkbox]')).is(':checked')) {
        jQuery.cookie(SearchModalCookie, 'SearchModalDesabled', { expires: 7, path: '/' });
    }
})
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'></script>
</head>
<body>
<div class="container pt-4 pb-4">
    <div class="alert alert-info">
        <strong>Select max 3 words</strong> in the content to open the search modal
    </div>
    <div class="main-content">
        <h1>Bootstrap search selected text</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur libero turpis, volutpat vitae metus eu, ultricies hendrerit ante. Sed commodo ornare velit ut consectetur. Sed blandit tellus lacus, nec luctus ex interdum a. Nulla vestibulum vehicula
            metus ac malesuada. Proin est tortor, bibendum eget placerat eget, mattis sed augue. Curabitur nec fringilla est, volutpat luctus magna. Mauris commodo scelerisque elit, vel posuere turpis lacinia id. Aenean facilisis at ligula pulvinar lobortis.
            Donec feugiat lectus ac orci posuere, in ullamcorper lorem congue. Pellentesque congue sem ante, eu placerat nulla consectetur eget. Vivamus iaculis sed magna vitae interdum. Maecenas pharetra ultricies velit. Aenean porta erat vitae justo dapibus
            feugiat quis eget felis. Donec lorem nulla, dignissim eu interdum sit amet, fermentum in nunc. Curabitur in nulla eu nibh aliquam sodales dictum ut nisl.
        </p>

        <p>
            Pellentesque iaculis hendrerit vehicula. In hac habitasse platea dictumst. Nam porttitor justo in euismod elementum. Donec mi turpis, pretium eget egestas ac, vestibulum sed quam. Integer auctor felis diam, et tincidunt neque tincidunt a. Pellentesque
            habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed tellus facilisis lorem tristique blandit.
        </p>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="SearchModal" tabindex="-1" role="dialog" aria-labelledby="SearchModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Search Selected Text</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <input type="text" class="form-control input-search" placeholder="Search for..." aria-label="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-secondary" type="button">Go!</button>
                    </span>
                </div>
            </div>
            <div class="modal-footer">
                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Stop opening Search Modal on select text</span>
                </label>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
var nbrwords = 3;
var SearchModalCookie = location.host + "-SearchModal";
$('.main-content').mouseup(function () {
    var text = getSelectedText();
    var words = text.split(' ');
    if (text != '' && words.length <= nbrwords && jQuery.cookie(SearchModalCookie) == undefined) {
        $('#SearchModal').find('.modal-body .input-search').val(text);
        $('#SearchModal').modal("show");
    }
});
$('#SearchModal').on('hidden.bs.modal', function (e) {
    if ($(this).find($('input[type=checkbox]')).is(':checked')) {
        jQuery.cookie(SearchModalCookie, 'SearchModalDesabled', { expires: 7, path: '/' });
    }
})
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}
</script>

</body>
</html>
Preview