A simple script for HTML to do. https://carolcoral.github.io/Lcript/

[TOC]

Version:0.1

Features

1.Fuzzy search for ajax

2.Highlighted Search results

3.Click blank to hide search results

4.Remove the white space on both sides of the string

5.Pop up the text text in the specified element

1.Fuzzy search for ajax

1.1 First all

1.import these scripts in your page.Beside the Bootstarp and the Jquery should be import at all of scripts first.But the style of Bootstrap is not must be.You can use your own css file.

    <!--have to import jquery first-->
    <script type="application/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/js/jquery/jquery.js"></script>
    <!--import bootstrap-->
    <script type="application/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/bootstrap/js/bootstrap.min.js"></script>

2.Then you can import this script in your page to do Search.

    <!--import search javascript-->
    <script type="application/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/src/js/search_box/js"></script>

3.Why we should have to import these script?

    Because this script is based on the jquery to do .But you can not have to import the Bootstrap and import what you want a style or theme.

1.2 Then,use it in your page

1.The following attributes are required

    //type of get data,ajax or json
    "url":"/admin/tsg_fuzzy_search",
    //bind method to this element
    "el":obj,
    //show your have searched results
    "el_show":".selected_keywords",
    //refresh the search post time(in ms)
    "refresh":200,
    //set your own type for ajax
    "ajaxType":"post",
    //set the show-tab for search results,must be class,ul style
    "showTabStyle":"list-group",
    //li style
    "listGroupItem":"list-group-item"

2.You can use it like this in your page,and add this code oninput=“test(this)” in your input box.Ofcourse,you can change the “test” to what you want.When you changed it,don’t forget change the function’s name too, please.

    function test(obj){
        lcript.search_ajax({
            "url":"/admin/tsg_fuzzy_search",
            "el":obj,
            "el_show":".selected_keywords",
            "refresh":200,
            "ajaxType":"post",
            "showTabStyle":"list-group",
            "listGroupItem":"list-group-item"
        })
    }

1.3 Importent Notes

1.You have to use “keywords” as your ajax request keyword

2.If you want to do something for a search result,you can create a function which name is “choise_one_template”,then make some methods in it.Like this function:

        //Add the selected template to the display bar
        function choise_one_template(obj) {
            //Get the value of the selection
            var template_data = $(obj).text()
            //Making HTML
            var selected_template_html = 
                "<button type='button' class='btn btn-default template_data' aria-label='Left Align'>"+
                    "<span class='glyphicon glyphicon-remove' aria-hidden='true' ='delete_template(this)'></span>"
                    +selected_template+
                "</button>"
            //Insert HTML into the specified div
            $("#results_2").append(selected_template_html)
        }

3.Request: use “keywords” as your request keyword.

4.Response: “data” is must.If your datatype is json in this response, you have to edit the 102 line in lcript.js.

{   
    "code":"",
    "msg":"",
    "data":""
}

1.4 Demo to show it

2.Click blank to hide search results

If you want to hidden the search-box when you click beside it,you can import these script in your page,and the “.selected_keywords” is your show-tab of search results.

    lcript.hidden(".selected_keywords")

3.Remove the white space on both sides of the string

If you want to pop the text content of the specified element, you can use this method lcript.trim(str) to do it.

    input:
        lcript.trim("   test   ")
    output:
        "test"

4.Pop up the text text in the specified element

If you want to pop the text content of the specified element, you can use this method lcript.alert(element) to do it.

    input:
        lcript.alert(".selected_keywords")
    output:
        "test"