보통 autocomplete 으로 하면
해당 input 필드에 select 값을 넣어줍니다.
그런데
입력하면 방금 입력한 글자를 기준으로 ajax를 통해서 가져와서 select 으로 보여줍니다.
이중에서 한개를 선택하면
기본적으로는 input 창에 그 값으로 대체 됩니다.
여기에서
기존의 텍스트 값이 있는 상태에서 띄어쓰기 혹은 콤마로 구분해서 입력하면
그것을 대상으로 해서 ajax를 통해서 가져와서 select 으로 보여줍니다.
이때
기존의 텍스트 값에 추가로 선택된 입력되도록 할 수 있는가요?
즉 스마트 폰에서 글자 자동으로 맞춤기능처럼
문자를 입력해주는 기능을 만들어 보고 싶은 것입니다.
다시 말하면
"감사" 라고 입력하면
자바스크립트가 "감사합니다." 라는 글자를 select로 보여주게하고
사용자는 그것을 선택하면
기존 텍스트 중에서 "감사"라는 글자가 자동으로 "감사합니다." 라고
바뀌어 지도록 하고 싶은 것입니다.
너무 어렵나요?
가능은 하겠지만 아직은 상상으로만 가능한 상태라
실제로 한번 만들어보고 싶습니다.
예전에 나를 도와준 마틴님이란 분이 있어 그분을 기억합니다.
2cpu의 도움주신 많은 분들께 늘 감사드립니다.
☎ HP 010-9678-7900
2cpu의 도움주신 많은 분들께 늘 감사드립니다.
☎ HP 010-9678-7900
angular같은 프레임워크 지원이 필요하지 않을까 싶네요.
정규식으로 처리하고, 다시 그것을 받아서
이전의 글자 중에서 셀렉터에서 선택한 그 글자만 바꾸기 하도록 처리하도록 하면
가능할 것 같습니다.
이게 잘되면 댓글을 쓰는 분들에게 아주 편리할 것 같습니다.
간단한 댓글은 입력시 자동입력으로 쉽게 처리가 가능하게 되는 것이지요.
하지만
해봐야 알지요. 실패해도 괜찮으니까....ㅎ
가능성이 더 많이 보입니다.
이것으로 어느 정도 가닥을 잡았습니다.
이것으로 처리하면 될듯 한데...
일단 조금 더 많이 근접하기는 했습니다만 아직은 성공은 장담하기 어렵습니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(function () {
var $testInpt = $('#test_inpt');
var keyuVal = "";
var hintVal = "";
var hintIdx = -1;
var hintArr = ['#####', '$$$$', '%%%%%', '******', '@@@@@'];
$testInpt.keyup(function( event ) {
keyuVal = $testInpt.val();
hintIdx = keyuVal.lastIndexOf(hintVal);
if (hintIdx > -1) {
keyuVal = keyuVal.substring(0, hintIdx);
}
ajaxTest().then(ajaxCallbackTest);
});
// ajax
var ajaxTest = function() {
var $deffered = $.Deferred();
try {
$deffered.resolve('success');
} catch(err) {
$deffered.reject('fail');
}
return $deffered.promise();
};
// ajax-callback
var ajaxCallbackTest = function(msg) {
if (keyuVal != "") {
hintVal = hintArr[Math.floor(Math.random() * hintArr.length)];
$testInpt.val(keyuVal +hintVal);
setCaretPosition('test_inpt', keyuVal.length);
}
};
var setCaretPosition = function(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if (elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
} else {
if (elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
} else {
elem.focus();
}
}
}
}
});
</script>
</head>
<body>
<input type="text" id="test_inpt" />
</body>
</html>
타이핑 속도를 체크해서, 일정시간동안 입력이 없으면 동작하게 하는 것도 방법이겠네요.
아직 머리가 멍해서 안되고 있습니다.
새벽에 코드를 다시보면 분명히 답이 있을 것 같은데...