iT邦幫忙

0

(已解決)於文本區域的中間帶出與插入自動完成內容

大家好,我參考這個範例,目前已經可以在文本區域尾端完成多個自動完成功能(例如輸入@a可以帶出有a相關的內容選擇與填入),但是我想要做的是也可以在文本區域的中間帶出與插入自動完成內容,我嘗試著修改,但始終只能在尾端才起作用,還請指點,謝謝。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/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"
	];
	function split( val ) {
		return val.split( /@\s*/ );
	}
	function extractLast( term ) {
		return split( term ).pop();
	}

	$( "#tags" )
		// don't navigate away from the field on tab when selecting an item
		.bind( "keydown", function( event ) {
			if ( event.keyCode === $.ui.keyCode.TAB &&
				$( this ).autocomplete( "instance" ).menu.active ) {
					event.preventDefault();
				}
			})
		.autocomplete({
			minLength: 0,
			source: function( request, response ) {
				// delegate back to autocomplete, but extract the last term
				response( $.ui.autocomplete.filter(
					availableTags, extractLast( request.term ) ) );
			},
			focus: function() {
				// prevent value inserted on focus
				return false;
			},
			select: function( event, ui ) {
				var terms = split( this.value );
				// remove the current input
				terms.pop();
				// add the selected item
				terms.push( ui.item.value );
				// add placeholder to get the comma-and-space at the end
				terms.push( "" );
				this.value = terms.join( "" );
				return false;
			}
		});
});
</script>
</head>

<body>
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<textarea id="tags"></textarea>
</div>
</body>
</html>
其實有點不懂 "文本區域中間, 文本區域尾端是啥意思" XD..

1 個回答

0
微笑
iT邦新手 4 級 ‧ 2020-12-29 10:38:02
最佳解答

這邊採用原範例的 , 區隔符號
如果要在中間加字串的話,除了,以外還要加上;
輸入內容在中間,選取後 ; 會消失
例:
Java, a;sdafwqsad

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Multiple values</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var tempTest = /;\s*/;
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      tempValue = split( term ).pop();
      return tempTest.test(tempValue)?tempValue.split(tempTest).shift():tempValue;
    }
 
    $( "#tags" )
      // don't navigate away from the field on tab when selecting an item
      .on( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          tempValue = terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          tempTest.test(tempValue) ? terms.push(tempValue.split(tempTest).pop()) : terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tag programming languages: </label>
  <input id="tags" size="50">
</div>
 
 
</body>
</html>
看更多先前的回應...收起先前的回應...
小斑 iT邦新手 4 級 ‧ 2020-12-29 11:24:17 檢舉

謝謝
可以順利在文本中間自動帶入內容了
不過在中間帶入內容後
游標的位置會在文本最後面
如果想將游標設置在帶入內容的後面
請問應該如何調整呢?
例如:
Java, a;sdafwqsad
選擇Asp後變成Java, Asp, sdafwqsad
這時游標在sdafwqsad的後面
我希望可以設置在Asp,後面
謝謝

微笑 iT邦新手 4 級 ‧ 2020-12-29 11:39:59 檢舉
select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          tempValue = terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          tempTest.test(tempValue) ? terms.push(tempValue.split(tempTest).pop()) : terms.push( "" );
          this.value = terms.join( ", " );
          this.selectionStart = this.value.length - terms[terms.length-1].length;
          this.selectionEnd = this.value.length - terms[terms.length-1].length;
          return false;
        }
小斑 iT邦新手 4 級 ‧ 2020-12-29 11:48:39 檢舉

可以了,實在是太感謝了/images/emoticon/emoticon32.gif

微笑 iT邦新手 4 級 ‧ 2020-12-29 11:49:09 檢舉

/images/emoticon/emoticon37.gif

小斑 iT邦新手 4 級 ‧ 2020-12-29 15:16:12 檢舉

不好意思
想額外再請教一下
一定還要另外加上;才可以嗎
有沒有不另外加上;也可以做到的方式呢?
謝謝

微笑 iT邦新手 4 級 ‧ 2020-12-29 15:35:33 檢舉

分號只是一種條件,你會需要有一個條件來概括你需要判斷的字串範圍

例如今天打J,會跳出java跟javascript可以選擇
再打一個c,這兩個選擇就會因為字串不符消失了
但如果把分號拿掉又希望可以判斷的話,那包含j或c的字串都會出現

小斑 iT邦新手 4 級 ‧ 2020-12-29 15:46:23 檢舉

原來如此,了解了,謝謝/images/emoticon/emoticon41.gif

微笑 iT邦新手 4 級 ‧ 2020-12-29 15:47:37 檢舉

你可以把條件改成其他東西,例如游標位置

重點只是要讓電腦看得懂你想幹嘛,或是給他一個range規則來判斷

小斑 iT邦新手 4 級 ‧ 2020-12-29 16:44:08 檢舉

不好意思
一直麻煩您
如果想改成游標位置做判斷應該怎麼改呢?
我有嘗試了一下
但對這方面沒有很熟悉

微笑 iT邦新手 4 級 ‧ 2020-12-29 17:12:01 檢舉
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Multiple values</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var tempSelection = 0;
    var tempTest = "";
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      tempTest = term.substring(0,tempSelection);
      tempValue = split( tempTest ).pop();
      return tempValue;
    }
 
    $( "#tags" )
      // don't navigate away from the field on tab when selecting an item
      .on( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          a=$("#tags");
          tempSelection=a[0].selectionEnd;
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          tempValue = terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
	  console.log(tempSelection,this.value)
          tempSelection != 0 ? terms.push(this.value.substring(tempSelection,this.value.length)) : terms.push( "" );
          this.value = terms.join( ", " );
          this.selectionStart = this.value.length - terms[terms.length-1].length;
          this.selectionEnd = this.value.length - terms[terms.length-1].length;
          return false;
        }
      });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tag programming languages: </label>
  <input id="tags" size="50">
</div>
 
 
</body>
</html>
小斑 iT邦新手 4 級 ‧ 2020-12-29 17:35:23 檢舉

謝謝
真的是太厲害了
/images/emoticon/emoticon32.gif

微笑 iT邦新手 4 級 ‧ 2020-12-29 18:12:05 檢舉

/images/emoticon/emoticon37.gif

我要發表回答

立即登入回答