HTML(5)简单好用自动联想输入框

简单好用自动联想输入框,并且会把结果保存到localstorage里，方便如果是大量数据的tips，快速读取，不需要浪费服务器资源
可以自定义一个function，把localstorage的id自定义一下，避免不同变量冲突。

********************************html********************************
//    <form action='$jump_url' method='get'>
//    根据订单号搜索:<input type='text' id='billcode_search_input' name='BILLCODE'>
//    <input type='submit' value='确认'>
//    </form>

    // <script>
    // var myJsVariable = "<?php echo $input_tips_url; ?>"; 
    // getALLBILLCODE(myJsVariable,tip="<?php echo $order_type; ?>");

    // </script>

********************************html********************************


********************************js********************************

function createstyle(css){
    var mystyle=$('#mystyle');
    if(!mystyle.length>0){
        var style="<style id='mystyle'></style>";
        $(document).find('head').append(style);
        mystyle=$('#mystyle');
    }
    mystyle.append(css);
}
    function autoShowUser(users,id) {
        id=id||"#value";
        var wd=$(id)[0].clientWidth;
        var hg=$(id)[0].clientHeight;
        var suggest='<ul id="suggest" style="display: none;position:absolute;width: '+wd+'px; background-color: white;padding: 0px;margin:0px;"></ul>';
        var css_li="#suggest li{display: block;height:"+hg+";font: 14px/25px '微软雅黑','黑体',sans-serif;margin: 0px;color:rgb(66, 139, 202);text-align: left;padding:1px}";
        css_li+="#suggest li:hover{cursor: pointer;margin: 0px;background-color: rgb(227,227,227);}";
        $(id).after(suggest);
        createstyle(css_li);
        $(id).bind('keyup click',function (e) {
            var name= $(this).val().toUpperCase();
            var num=0;
            if(name!='' ){
                var html='';
                for (var i=0;i<users.length;i++){
                    if(users[i].indexOf(name)>-1){
                        html += "<li>" +users[i]+"</li>";
                        num++;
                    }
                    if(num>9){
                        break;
                    }
                }
                if(html !=''){
                    $('#suggest').show();
                    $('#suggest').html(html);
                    $('#suggest li').css(css_li);
                    $('#suggest li').bind('click',function(e){
                        $(id).val($(e.target).html());
                        $('#suggest').hide();
                    });
                }
            }else{

                $('#suggest').hide();
            }
        });

        $(id).blur(function () {
            setTimeout(function () {
                $('#suggest').hide();
            },150);
        })

    }
    function getALlGoodsCode(url) {  
        // 检查localStorage中是否存在key为'tips'的数据  
        if (localStorage.getItem('tips')) {  
          // 如果存在，则直接读取并转换成数组格式  
          const tipsData = JSON.parse(localStorage.getItem('tips'));  
          autoShowUser(tipsData,'#billcode_search_input');
          return tipsData;  
        } else {  
          // 如果不存在，则从指定的URL中获取JSON数据并写入localStorage  
          fetch(url) // 替换为实际的URL  
            .then(response => response.json())  
            .then(data => {  
              // 将JSON数据转换为数组格式，并写入localStorage  
              const tipsArray = data;  
              localStorage.setItem('tips', JSON.stringify(tipsArray));  
              autoShowUser(tipsArray,'#billcode_search_input');
              return tipsArray;  
            })  
            .catch(error => {  
              console.error('Error fetching tips:', error);  
            });  
          // 返回一个空数组作为默认值  
          return [];  
        }  
      }
********************************js********************************
    ```