• input autocomplete属性设计输入框自动联想(php实现)


    因为客户临时要求加一个输入框自动联想,就开始了解这块。结合网上总结最难的一点就是找好对应的js版本以及相应的jQuery-ui;

    以下是我用的版本,以及连接地址:

    jQuery的js文件:

    <script type='text/javascript' src='resource/js/lib/jquery-1.9.1.js'></script>

    下载地址:http://code.jquery.com/jquery-1.9.1.js

    jQuery UI的js文件:

    <script type='text/javascript' src='resource/js/lib/jquery-ui.js'></script>

    下载地址:http://code.jquery.com/ui/1.10.3/jquery-ui.js

    jQuery UI的css文件:

    <link type="text/css" rel="stylesheet" href="../addons/oil_shopping_test/images/jquery-ui.css">  
    下载地址:http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.css

    HTML代码:
    <input type="text" class="form-control" id="sendplateno" name="sendplateno" autocomplete="off">
    

     JS代码 :

    <script type="text/javascript">
    $(function(){
      	var search=$("#sendplateno");
      	var source  =new Array();//["aab","aac","bbd","bbn"];
         //当输入框输入时通过ajax从后台获取数据不断更新source  search.keyup(function(){ var url = "{php echo $this->createMobileUrl('myorder', array('op' => 'sendplatenos'));}"; $.post(url, {'key':$("#sendplateno").val()}, function(data) { var data = $.parseJSON(data); //alert(data[0].sendplateno); for(var i = 0; i < data.length; i++){ //alert(data[i].sendplateno); source[i] = data[i].sendplateno; } //alert(source); }); }); search.autocomplete({ source:source, messages: { //message设置不出现匹配关键字的结果 noResults: '', results: function() {} } }); }) }); </script> 
    后台查询代码
    elseif($op=='sendplatenos'){
    			if ($_W['isajax']){
    				$key = $_GPC['key'];
    				$where = " weid = '{$_W['uniacid']}'";
    				$where .= " and sendplateno LIKE '%{$_GPC['key']}%'";
    				$sql = "SELECT sendplateno FROM " . tablename('shopping_order') . " WHERE $where ORDER BY id DESC limit 8";
    				$list = pdo_fetchall($sql);
    				exit(json_encode($list));
    				
    			}			
    		}  

     PS:这是PHP实现的,但我觉得思路对了JAVA也可以,最重要的还是找对jar包。 

  • 相关阅读:
    Serverless 时代下大规模微服务应用运维的最佳实践
    Dubbo 跨语言调用神兽:dubbo-go-pixiu
    Flink 1.12 资源管理新特性回顾
    [JDBC] Kettle on MaxCompute 使用指南
    AI运动:阿里体育端智能最佳实践
    MaxCompute非事务表如何更新数据
    如何利用云原生技术构建现代化应用
    实时数仓入门训练营:实时计算 Flink 版 SQL 实践
    实时数仓入门训练营:基于 Apache Flink + Hologres 的实时推荐系统架构解析
    Flink + Iceberg + 对象存储,构建数据湖方案
  • 原文地址:https://www.cnblogs.com/mlorct/p/8377677.html
Copyright © 2020-2023  润新知