jquery ui 的autocomplete 点击就加载指定数组

最新推荐文章于 2023-08-11 22:06:52 发布

佬油条

最新推荐文章于 2023-08-11 22:06:52 发布

阅读量1.5k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wangzhi291/article/details/47123801

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

有个朋友给个维护的代码叫我帮忙看，在初始化页面的时候就给那些文本框添加了autocomplete 给了指定的数组资源。

他的要求就是点击文本框，就要出现三个默认的下拉列表，不能是全部的三个值完全不一样，没法搜索。

首先是解决点击就出现列表的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="js/jquery-ui.css">
   <script src="js/jquery-1.10.2.js"></script>
  <script src="js/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,

      _source:['Java','Scala','good']

      minLength:0,

      create: function(event, ui) {    
          $(this).bind("click",function(){    
              var active=$(this).data("autocomplete");    
              if(!active){    
                  $(this).autocomplete("search" , "");     
              }  
          });    
 	}
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>

添加一个创建就绑定点击的事件，点击就执行搜索方法，搜索空字符。

但是这样子全都搜索出来了。

没办法硬着头皮修改jquery.ui.js里面的代码。

修改 search 方法当value为 "" 空字符的时候，就把数组备份起来，然后把默认的数组赋上去。当不是空的字符串就把备份的数组拿出来，然后搜索。

首先添加一个备份的

_source: null,

$.widget( "ui.autocomplete", {
	version: "1.11.4",
	defaultElement: "<input>",
	options: {
		appendTo: null,
		autoFocus: false,
		delay: 300,
		minLength: 1,
		position: {
			my: "left top",
			at: "left bottom",
			collision: "none"
		},
		source: null,
		_source: null,
		// callbacks
		change: null,
		close: null,
		focus: null,
		open: null,
		response: null,
		search: null,
		select: null
	},

然后修改 search 方法

search: function( value, event ) {
		value = value != null ? value : this._value();

		// always save the actual value, not the one passed as an argument
		this.term = this._value();

		if ( value.length < this.options.minLength ) {
			return this.close( event );
		}

		if ( this._trigger( "search", event ) === false ) {
			return;
		}
		
		if(''==value){
			this.options.source = <span style="font-family: Arial, Helvetica, sans-serif;">this._source</span><span style="font-family: Arial, Helvetica, sans-serif;">;</span>
			this._initSource();
		}else{
			this.options.source = this.source;
			this._initSource();
		}
		return this._search( value );
	},

添加 ''==value 的判断如果是空就备份然后给默认值然后初始化资源。

如果不为空就把备份的拿出来然后再搜索。