zoukankan html css js c++ java

百度搜索框自动补全

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="/jquery-weui-build/dist/lib/weui.min.css">
    <link rel="stylesheet" href="/jquery-weui-build/dist/css/jquery-weui.css">
    <link rel="stylesheet" href="/jquery-weui-build/demos/css/demos.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="/static/jquery-weui-build/dist/lib/fastclick.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


    <script>
        $(function () {
            FastClick.attach(document.body);
        });
    </script>
    <script src="/jquery-weui-build/dist/js/jquery-weui.js"></script>
</head>
<body>

<div class="ui-widget">


    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form" action="#">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="tags" placeholder="搜索" required=""
                       onkeyup="catch_keyword(this.value)">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText"
                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
</div>

<script>
    var availableTags = [];//数据源

    //先初始化自动补全功能
    $("#tags").autocomplete({
        source: availableTags //数据源
    });

    //去掉字符串中任意位置的空格
    function Trim(str, is_global) {
        var result;
        result = str.replace(/(^s+)|(s+$)/g, "");
        if (is_global.toLowerCase() == "g") {
            result = result.replace(/s/g, "");
        }
        return result;
    }

    //判断字符串是否全是中文
    function isChn(str) {
        var reg = /^[u4E00-u9FA5]+$/;
        if (!reg.test(str)) {
            return false;
        } else {
            return true;
        }
    }

    //捕捉键入的关键字
    function catch_keyword(word = null) {

        if (isChn(Trim(word, 'g'))) {
            get_source(word);
            $("#tags").autocomplete({
                source: availableTags //数据源
            });

        }
    }

    //请求后端获取数据源
    function get_source(word = null) {
        var url = "<?php echo base_url('admin/Demo/source');?>?keyword=" + word;
        $.get({
            type: 'GET',
            url: url,
            async: false,//改为同步
            dataType: 'json',
            success: function (response) {
                console.log('1');
                availableTags = response;
            }
        });
    }

</script>
</body>
</html>

转载   https://www.jianshu.com/p/18047be090f4

<script>
    var availableTags = [];//数据源

    //先初始化自动补全功能
    $("#tags").autocomplete({
        source: availableTags //数据源
    });

    //去掉字符串中任意位置的空格
    function Trim(str, is_global) {
        var result;
        result = str.replace(/(^s+)|(s+$)/g, "");
        if (is_global.toLowerCase() == "g") {
            result = result.replace(/s/g, "");
        }
        return result;
    }

    //判断字符串是否全是中文
    function isChn(str) {
        var reg = /^[u4E00-u9FA5]+$/;
        if (!reg.test(str)) {
            return false;
        } else {
            return true;
        }
    }

    //捕捉键入的关键字
    function catch_keyword(word = null) {

        if (isChn(Trim(word, 'g'))) {
            get_source(word);
            $("#tags").autocomplete({
                source: availableTags //数据源
            });

        }
    }

    //请求后端获取数据源
    function get_source(word = null) {
        var url = "<?php echo base_url('admin/Demo/source');?>?keyword=" + word;
        $.get({
            type: 'GET',
            url: url,
            async: false,//改为同步
            dataType: 'json',
            success: function (response) {
                console.log('1');
                availableTags = response;
            }
        });
    }

</script>

查看全文

相关阅读:
SAP PI 如何实现消息定义查询
 EWM与ERP交互程序
 ITS Mobile Template interpretation failed. Template does not exist
SAP Material Flow System (MFS) 物料流系统简介
 SAP EWM Table list
EWM RF 屏幕增强
 SAP EWM TCODE list
SAP扩展仓库管理（SAPEWM）在线研讨会笔记
 ERP与EWM集成配置ERP端组织架构（二）
EWM RF（Radio Frequency）简介

原文地址：https://www.cnblogs.com/isuansuan/p/10689177.html