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

   Á¶È¸ 2877   Ãßõ 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 4804/5574
2015-12   999326   ¹é¸Þ°¡
2014-05   4443317   Á¤ÀºÁØ1
2014-07   5473   À©µµ¿ì10
2012-10   4377   °æ¹ÚÇѽùÎ
2015-11   4996   ±è°Ç¿ì
2016-10   3634   °ø¹é±â
2017-12   6264   ¹è»ó0¿ø
2009-08   5320   ¼Õ¼®¿ì
2016-10   4160   PAMA¸Ó¸®
2015-11   3159   Fantasy
2016-10   4376   ŵ°íÀ×
2021-09   3167   ³Ä¹Ì³Ä¹Ì
2015-11   4519   lovemiai
2017-12   3452   ¾Æ¸®½Ã¸¶
2015-11   10226   ÀåÇöÀç
2020-04   6824   DeepSky
2023-04   1082   ¹üÀÌ´Ô
2014-08   7498   ±èÈÆ1
2020-05   2315   È¥ÀÚ°¡´Â±æ
2021-09   1815   ¾îÄg
2020-05   5963   ÇãÀα¸¸¶Æ¾
2014-08   3565   HeraldEdu