jQuery UI插件實(shí)現(xiàn)百度提詞器效果
本文實(shí)例為大家分享了jQuery自動(dòng)文字提示功能,供大家參考,具體內(nèi)容如下
需要在項(xiàng)目中實(shí)現(xiàn)動(dòng)態(tài)添加,刪除輸入框,每個(gè)框里面都要有文字提示。
js部分:
//自動(dòng)完提示 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對象只有一個(gè)term屬性,對應(yīng)用戶輸入的文本 // response是一個(gè)函數(shù),在你自行處理并獲取數(shù)據(jù)后,將JSON數(shù)據(jù)交給該函數(shù)處理,以便于autocomplete根據(jù)數(shù)據(jù)顯示列表 // 自行處理并獲取數(shù)據(jù)... //var dataObj = data; // 表示處理后的JSON數(shù)據(jù) response(dataObj); // 最后將數(shù)據(jù)交給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">*相關(guān)推薦</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> //添加推薦節(jié)點(diǎn) 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); } //刪除當(dāng)前推薦節(jié)點(diǎn) function del(obj) { if($(".show_goods").length <= 3 ) { alert('最少需要三個(gè)推薦標(biāo)題'); return false; } else { $(obj).parent().remove(); $(obj).prev().prev().remove(); $(obj).prev().remove(); $(obj).remove(); } } </script> </div> </div>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 利用jsonp跨域調(diào)用百度js實(shí)現(xiàn)搜索框智能提示
- javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全
- JS仿百度搜索自動(dòng)提示框匹配查詢功能
- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
- 文本框輸入時(shí) 實(shí)現(xiàn)自動(dòng)提示(像百度、google一樣)
- php+ajax做仿百度搜索下拉自動(dòng)提示框(有實(shí)例)
- 仿百度輸入框智能提示的js代碼
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 百度地圖API提示230 錯(cuò)誤app scode碼校驗(yàn)失敗的解決辦法
- JS實(shí)現(xiàn)仿google、百度搜索框輸入信息智能提示的實(shí)現(xiàn)方法
相關(guān)文章
jQuery中[attribute^=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute^=value]選擇器用法,實(shí)例分析了[attribute^=value]選擇器的功能、定義及匹配以某些值開始的元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
這篇文章主要介紹了jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery事件綁定、解綁、事件冒泡、阻止冒泡等相關(guān)原理與應(yīng)用技巧,需要的朋友可以參考下2019-05-05JS實(shí)現(xiàn)點(diǎn)擊生成UUID的方法完整實(shí)例【基于jQuery】
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊生成UUID的方法,結(jié)合完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)的隨機(jī)字符串生成相關(guān)操作技巧,需要的朋友可以參考下2019-06-06使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
這篇文章主要介紹了使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口,需要的朋友可以參考下2014-12-12關(guān)于jQuery中的each方法(jQuery到底干了什么)
這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下2014-03-03EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例
本篇文章主要介紹了EasyUI修改DateBox和DateTimeBox的默認(rèn)日期格式示例,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01