jQuery UI插件实现百度提词器效果


Posted in Javascript onNovember 21, 2016

本文实例为大家分享了jQuery自动文字提示功能,供大家参考,具体内容如下

需要在项目中实现动态添加,删除输入框,每个框里面都要有文字提示。
js部分:

//自动完提示 
  function tip(obj) { 
    $( obj ).autocomplete({ 
        minLength: 0, 
        source: function (request, response) { 
          //alert('dsada'); 
          var title = $('#test1').val(); 
          $.ajax({ 
            url: "HotList.php?act=title", 
            type: 'get', 
            dataType: "json", 
            data: request, 
            success: function (dataObj) { 
              // request对象只有一个term属性,对应用户输入的文本 
              // response是一个函数,在你自行处理并获取数据后,将JSON数据交给该函数处理,以便于autocomplete根据数据显示列表 
 
              // 自行处理并获取数据... 
              //var dataObj = data; // 表示处理后的JSON数据 
              response(dataObj); // 最后将数据交给autocomplete去展示 
            }, 
            error: function (XMLHttpRequest, textStatus, errorThrown) { 
              //alert('获取信息失败'); 
              //alert(XMLHttpRequest.status); 
              //alert(XMLHttpRequest.readyState); 
              //alert(textStatus); 
            } 
          }); 
        }, 
        focus: function( event, ui ) { 
          $( obj ).val( ui.item.title ); 
          return false; 
        }, 
        select: function( event, ui ) { 
          //$( "#project" ).val( ui.item.title ); 
          //$( "#project-id" ).val( ui.item.id ); 
          $(obj).val( ui.item.title ); 
          $(obj).prev().val( ui.item.id ); 
          return false; 
        } 
      }) 
      .data( "ui-autocomplete" )._renderItem = function( ul, item ) { 
      return $( "<li>" ) 
        .append( "<a>" + item.id + "<br>" + item.title + "</a>" ) 
        .appendTo( ul ); 
    }; 
  }

html:

<div class="control-group"> 
 <label class="control-label">*相关推荐</label> 
   <div class="controls"> 
     <?php foreach($listOne['recommend_title'] as $k => $v) { ?> 
   <div> 
    <input type="hidden" name="tuijian_id[]" value="<?php echo $listOne['title_id'][$k]; ?>" /> 
    <input type="text" name="tuijian[]" class="show_goods" onkeyup="tip(this)" value="<?php echo $v;?>"/> <span class="btn" onclick="del(this);">删除</span> 
    </div> 
    <? } ?> 
    <p id="project-description"></p> 
    <span class="btn" id="add" onclick="add(this);">添加</span> 
    <script> 
     //添加推荐节点 
        function add(obj) { 
         var str = "<div><input type='hidden' name='tuijian_id[]' /><input type='text' class='show_goods' name='tuijian[]' onkeyup='tip(this)'/> <span class='btn' onclick='del(this);'>删除</span></div>"; 
             $(obj).before(str); 
         } 
        //删除当前推荐节点 
         function del(obj) { 
         if($(".show_goods").length <= 3 ) { 
         alert('最少需要三个推荐标题'); 
         return false; 
         } else { 
         $(obj).parent().remove(); 
         $(obj).prev().prev().remove(); 
         $(obj).prev().remove(); 
         $(obj).remove(); 
          } 
 
       } 
 
   </script> 
 </div> 
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
javascript中Number的方法小结
Nov 21 #Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 #Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 #Javascript
详解js中call与apply关键字的作用
Nov 21 #Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 #Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 #Javascript
全面解析node 表单的图片上传
Nov 21 #Javascript
You might like
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
python采集百度百科的方法
2015/06/05 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
优秀食品类广告词
2014/03/19 职场文书
年会搞笑主持词
2014/03/27 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
业务内勤岗位职责
2015/04/13 职场文书
幼儿园辞职信
2015/05/13 职场文书
就业推荐表院系意见
2015/06/05 职场文书
大学生读书笔记范文
2015/07/01 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS