天天看点

jquery ui autocomplete (联想自动提示)

jquery ui 各个版本都在这里:http://jqueryui.com/download/all/

我选择的版本为:jquery-ui-1.11.2 .zip

操作的结果图:

jquery ui autocomplete (联想自动提示)

   代码:

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
<!--   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" target="_blank" rel="external nofollow" >
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> -->
  <link rel="stylesheet" href="../../../../../function/js/jquery-autocomplete/jquery-ui.css" target="_blank" rel="external nofollow" >
  <script src="../../../../../function/js/jquery-autocomplete/jquery-1.10.2.js"></script>
  <script src="../../../../../function/js/jquery-autocomplete/jquery-ui.js"></script>
  
  
  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>
           

动态初始化【根据input每次输入值不一样,获取不同的结果】

//耗材采购  获取规格型号
function getGoodsSpec(pfid,topcategoryid,searchval){
	var rs = [];
	$.ajax({
        cache: false,
        type: "POST",
        url:ip+'/mydemo1/weixin/ajax-service.php',
        data:{method:'getGoodsSpec',pfid:pfid,topcategoryid:topcategoryid,searchval:searchval},//mainForm,form表单的Id
        async: false,
        dataType:'text',
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("网络异常,请稍后再试");
        },
        success: function(data) {
        	var  result = eval('(' + data + ')');
        	var flag = result.flag;
        	var jumpUrl = '';
        	if(flag){
        		rs = result.result;
        		//alert('获取规格型号数据成功');
        	}else{
        		alert('获取规格型号数据失败');
        	}
        }
    });
	
	return rs;
}



//input 联想自动提示
function initInputAutocomplete(){
	
	 $( "#tags" ).autocomplete({
	    source: function( request, response ) {
	        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
	        var val = $('.product-type option:selected').val();
	        var searchval = $('input[name="goods[0][specifications]"]').val();
	        var names = getGoodsSpec(pfid,val,searchval);
	        response( $.grep( names, function( value ) {

	          return names;
	        }) );
	      }
	 });
}
           

demo百度云盘代码下载链接:https://pan.baidu.com/s/1pL2yZfd

  参考链接:http://blog.csdn.net/killer_zr/article/details/20364795

版权声明:本文为CSDN博主「weixin_33896069」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_33896069/article/details/92590207