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

   Á¶È¸ 3713   Ãßõ 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 4177/5691
2014-05   5017302   Á¤ÀºÁØ1
2015-12   1552702   ¹é¸Þ°¡
2021-08   3712   ´Ù·ÕÀÌ
2014-03   3712   1mÀü
2018-02   3712   ±è°Ç¿ì
2019-02   3712   °¡ºü·Î±¸³ª
2014-04   3712   Æ丣¼¼¿ì½º
2016-09   3712   Landa
2016-09   3712   PCMaster
2018-02   3712   Smile
2018-08   3712   ÇÁ·¹Áö´øÆ®
2015-07   3712   ¼¾Ä¡
2018-11   3712   ¸Ó¸®°¨ÀÚ
2020-12   3712   Ç®·Îµå½Ã½ºÅÛ
2021-09   3712   keros
2014-04   3712   ºü½Ã¿Â
2020-03   3712   ½ÃÇ»¸Ç
2015-11   3712   º¸¹°¼¶
2020-05   3712   pumkin
2018-02   3712   ¾Ë¿À
2017-10   3712   õ¿Üõoo³ë¡¦
2017-06   3712   ´ÃÆĶõ