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

   Á¶È¸ 2878   Ãßõ 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 9/5575
2015-12   999457   ¹é¸Þ°¡
2014-05   4443535   Á¤ÀºÁØ1
03-15   304   ½ÅÀº¿Ö
03-15   312   ¹Ì´Ï¹Ì
03-15   236   È­¶õ
03-14   352   ÇູÇϼ¼
03-14   377   ÃÊÄÚ¼ÛÀÌ
03-14   529   °í¾çÀ̴¾ֿË
03-14   644   ½ÅÀº¿Ö
03-14   270   Â÷°¡¿î¾Æ¾Ó
03-14   403   ¹«¾Æ
03-14   535   azchoi
03-14   209   °í¹«¸¶¶Ç
03-14   392   ¹ä¾Ë1±èÇü±Ù1
03-14   237   µµ¾Æ»ïÃÌ
03-13   326   ¹Ì´ã
03-13   397   °­Çѱ¸
03-13   328   ¿Ã´Ð½º
03-13   387   ±¤ÁÖµ¿Å°È£Å×
03-13   307   ¸¶½ºÄÚÆ®
03-13   318   ¹«¸íÀÎ12
03-13   352   õ¹øµÕ°³