ÀÚ¹Ù½ºÅ©¸³Æ®autocomplete ±â´ÉÀ¸·Î ÀÌ·¸°Ôµµ ÀÀ¿ëÀÌ °¡´ÉÇÑ°¡¿ä?

   Á¶È¸ 3641   Ãßõ 0    

보통 autocomplete 으로 하면 

해당 input 필드에 select 값을 넣어줍니다.


그런데

입력하면 방금 입력한 글자를 기준으로 ajax를 통해서 가져와서 select 으로 보여줍니다.

이중에서 한개를 선택하면

기본적으로는 input 창에 그 값으로 대체 됩니다.


여기에서 

기존의 텍스트 값이 있는 상태에서 띄어쓰기 혹은 콤마로 구분해서 입력하면

그것을 대상으로 해서 ajax를 통해서 가져와서 select 으로 보여줍니다.


이때 

기존의 텍스트 값에 추가로 선택된  입력되도록 할 수 있는가요?

즉 스마트 폰에서 글자 자동으로 맞춤기능처럼 

문자를 입력해주는 기능을 만들어 보고 싶은 것입니다.


다시 말하면 

"감사" 라고 입력하면 

자바스크립트가  "감사합니다." 라는 글자를 select로 보여주게하고

사용자는 그것을 선택하면 

기존 텍스트  중에서  "감사"라는 글자가 자동으로 "감사합니다." 라고 

바뀌어 지도록 하고 싶은 것입니다.


너무  어렵나요? 

가능은 하겠지만 아직은 상상으로만 가능한 상태라

실제로 한번 만들어보고 싶습니다.

예전에 나를 도와준 마틴님이란 분이 있어 그분을 기억합니다.
2cpu의 도움주신 많은 분들께 늘 감사드립니다.
☎ HP 010-9678-7900
ªÀº±Û Àϼö·Ï ½ÅÁßÇÏ°Ô.
¸¶ÀÚµ¹ 2020-06
¸®½ºÆ®ÇüÅ´ filter·ÎÇÏ¸é µÉ°Í °°Àºµ¥, ¸ð¹ÙÀÏó·³ ±×°Íµµ ajax·Î ÇÏ·Á¸é Äݹé Áö¿ÁÀÏ°Í °°Àºµ¥¿ä.
angular°°Àº ÇÁ·¹ÀÓ¿öÅ© Áö¿øÀÌ ÇÊ¿äÇÏÁö ¾ÊÀ»±î ½Í³×¿ä.
°¡¸¸È÷ »ý°¢Çغ¸´Ï ¾Æ¸¶µµ °¡´ÉÇÒ °Í °°½À´Ï´Ù.
Á¤±Ô½ÄÀ¸·Î ó¸®ÇÏ°í, ´Ù½Ã ±×°ÍÀ» ¹Þ¾Æ¼­
ÀÌÀüÀÇ ±ÛÀÚ Áß¿¡¼­ ¼¿·ºÅÍ¿¡¼­ ¼±ÅÃÇÑ ±× ±ÛÀÚ¸¸ ¹Ù²Ù±â Çϵµ·Ï ó¸®Çϵµ·Ï Çϸé
°¡´ÉÇÒ °Í °°½À´Ï´Ù.

ÀÌ°Ô ÀßµÇ¸é ´ñ±ÛÀ» ¾²´Â ºÐµé¿¡°Ô ¾ÆÁÖ Æí¸®ÇÒ °Í °°½À´Ï´Ù.
°£´ÜÇÑ ´ñ±ÛÀº ÀԷ½à ÀÚµ¿ÀÔ·ÂÀ¸·Î ½±°Ô 󸮰¡ °¡´ÉÇÏ°Ô µÇ´Â °ÍÀÌÁö¿ä.

ÇÏÁö¸¸
ÇغÁ¾ß ¾ËÁö¿ä. ½ÇÆÐÇصµ ±¦ÂúÀ¸´Ï±î....¤¾
focus À̺¥Æ®°¡ ÀÖ±º¿ä.
°¡´É¼ºÀÌ ´õ ¸¹ÀÌ º¸ÀÔ´Ï´Ù.
ÀÌ°ÍÀ¸·Î ¾î´À Á¤µµ °¡´ÚÀ» Àâ¾Ò½À´Ï´Ù.
ÀÌ°ÍÀ¸·Î ó¸®ÇÏ¸é µÉµí Çѵ¥...
ÀÏ´Ü Á¶±Ý ´õ ¸¹ÀÌ ±ÙÁ¢Çϱâ´Â Çß½À´Ï´Ù¸¸ ¾ÆÁ÷Àº ¼º°øÀº Àå´ãÇϱ⠾î·Æ½À´Ï´Ù.
¸¶ÀÚµ¹ 2020-06
ÀÌ·± ¹æ½ÄÀÎÁö ¸ð¸£°Ú³×¿ä. ¹ä¸Ô°í Àá±ñÇغôµ¥...

<!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>
¸¶ÀÚµ¹ 2020-06
´Ü ajax¸¦ Å׿ì¸é Åë½Å ȯ°æÀ̳ª µ¥ÀÌÅÍ ¾ç¿¡ µû¶ó ŸÀÌÇÎ ¼Óµµ¸¦ ¸ø µû¶ó°¡¼­ ¿øÇÏ´Â µ¿ÀÛÀ» ¾ÈÇÒ ¼öµµ ÀÖ½À´Ï´Ù.
ŸÀÌÇÎ ¼Óµµ¸¦ üũÇؼ­, ÀÏÁ¤½Ã°£µ¿¾È ÀÔ·ÂÀÌ ¾øÀ¸¸é µ¿ÀÛÇÏ°Ô ÇÏ´Â °Íµµ ¹æ¹ýÀ̰ڳ׿ä.
µÉ°Í µÉ°Í °°Àºµ¥...
¾ÆÁ÷ ¸Ó¸®°¡ ¸ÛÇؼ­ ¾ÈµÇ°í ÀÖ½À´Ï´Ù.
»õº®¿¡ Äڵ带 ´Ù½Ãº¸¸é ºÐ¸íÈ÷ ´äÀÌ ÀÖÀ» °Í °°Àºµ¥...
½º¸¶Æ®Æùó·³ autocomplete ±â´É µÇµµ·Ïµåµð¾î ±¸ÇöÇß½À´Ï´Ù.


QnA
Á¦¸ñPage 1459/5689
2014-05   5010924   Á¤ÀºÁØ1
2015-12   1546593   ¹é¸Þ°¡
2019-08   3643   ±è°Ç¿ì
2017-05   3643   È£¹Ú°í±¸¸¶
2019-05   3643   susemi
2017-09   3643   KDHNOVA
2017-05   3643   ¼­¿ï»ç¶÷
2015-04   3643   ¾Æ¸¶µ¥¿ì¾²
2019-08   3643   ¸ð¸£´Â°Ô³Ñ¡¦
2017-03   3643   »Ç¾áÀÌ
2014-04   3643   ¿ì¾Ó»Ñ¾Ó
2020-08   3643   Sakura24
2015-10   3643   ü¸®¾Æ
2021-12   3643   ¼ÒÁÖÇѺ´
2018-03   3643   ¹Ý¼º¸¸
2017-09   3643   ¼ÛÁÖȯ
2014-11   3643   ³×ÀÌÃÄ
2018-10   3643   ÀÌ¿øÀçK
2017-10   3643   bluo
2016-10   3643   ºü³ª³ª¿ìÀ¯
2018-09   3644   ÅëÅë9
2018-08   3644   ¹ä¾Ë1±èÇü±Ù1