大家好，我參考這個範例，目前已經可以在文本區域尾端完成多個自動完成功能(例如輸入@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>
已邀請的邦友 {{ invite_list.length }}/5
這邊採用原範例的 , 區隔符號
如果要在中間加字串的話，除了,以外還要加上;
輸入內容在中間，選取後 ; 會消失
例:
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>
謝謝
可以順利在文本中間自動帶入內容了
不過在中間帶入內容後
游標的位置會在文本最後面
如果想將游標設置在帶入內容的後面
請問應該如何調整呢？
例如：
Java, a;sdafwqsad
選擇Asp後變成Java, Asp, sdafwqsad
這時游標在sdafwqsad的後面
我希望可以設置在Asp,後面
謝謝
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;
}
可以了，實在是太感謝了
不好意思
想額外再請教一下
一定還要另外加上;才可以嗎
有沒有不另外加上;也可以做到的方式呢？
謝謝
分號只是一種條件，你會需要有一個條件來概括你需要判斷的字串範圍
例如今天打J，會跳出java跟javascript可以選擇
再打一個c，這兩個選擇就會因為字串不符消失了
但如果把分號拿掉又希望可以判斷的話，那包含j或c的字串都會出現
原來如此，了解了，謝謝
你可以把條件改成其他東西，例如游標位置
重點只是要讓電腦看得懂你想幹嘛，或是給他一個range規則來判斷
不好意思
一直麻煩您
如果想改成游標位置做判斷應該怎麼改呢？
我有嘗試了一下
但對這方面沒有很熟悉
<!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>
謝謝
真的是太厲害了
iThome鐵人賽
看影片追技術