곧 프로젝트 들어갈꺼같아서 1일1포스팅은 힘들듯 하다...
JQuery가 좀 부족한 기분이 들어 심심해서 만들어 본 쿼리
<html>
<body>
<input type="text" name="sch_txt" id="sch_txt" oninput="this.value = this.value.replace(/[^A-Za-z]/g, '').replace(/(\..*)\./g, '$1');">
<div id="add_div"></div>
</body>
</html>하려는 내용은 간단하다. input 에있는 텍스트에 글을 입력하면 javascript의 배열에 있는 값들을 검색해서 밑에 있는 add_div에 div를 추가시키기 까지만 하려 했지만 뭔가 아쉬워서 키보드 화살표와 엔터키를 이용해 선택 입력이 가능하도록 추가했다.
var language = ['python','C','Java','C++','C#','Visual Basic', 'Javascript','Assembly language','php','typescript'];
var low_language = language.map( v => v.toLowerCase()); // 소문자로 변경우선 간단하게 언어를 적을만큼만 적는다. 대소문자 구분을 하지 않기위해 모두 소문자로 변경시켜주었다.
(프로그래머스에서 쳤던 시험에선 서버에서 가져와서 하는거였는데 난 그냥 배열로 이용햇다. 그 당시..라고해봣자 몇달전이지만 거의 하나도 못하고 끝내버렸던거같다..)
$('#sch_txt').on('input', function () {
var cnt = 0;
$('#add_div').empty(); // 모두 지워준다.
for(var i=0; i < language.length; i++){
if(low_language[i].includes($(this).val().toLowerCase())){ // 소문자로 검색
var add_html = "<div class='select tag"+cnt+"'>" + language[i] + '</div>';
$('#add_div').append(add_html); // 위의 내용을 add_div라는 id를 가진곳에 추가
cnt++;
}
}
if($('#add_div').children().length == '0'){
var add_html = '<div> 데이터가 없습니다. </div>';
$('#add_div').append(add_html);
}
})간단하게 만든 쿼리 그냥 includes로 돌려서 해당값이 있다면 모두 가져와서 add_html을 append 해준다.
cnt는 뒤에 사용하려고 넣어놓은 카운터값이니까 신경안써도 무관!
이렇게 하면 input에 값을 입력하면 div들이 밑에 주르르륵 추가된다. 이벤트를 'input'으로 넣어놨으니 키보드 하나 누를때마다 실행되니까 값이 크면 렉먹으려나 ?.... 뉴비는 그런거 모른다.
다음은 키보드 위아래로 선택을 할것.. 일단 간단한 스타일을 입력해준다.
<style>
.select{ width:180px;}
.select.on{
background: #4285F4;
}
</style>아아무것도없다.
var select_div = -1;
$('#sch_txt').on('keyup',function (e) {
if($('#add_div').children().length == '0'){
return;
}선택시 이동될 div값 . cnt와 동일하다.
키에서 손을땔시 이벤트를 입력해준다. add_div의 길이가 0이면 아무것도 실행하지 않을것이다.. 어차피 밑에 아무것도 없응게
$('.select').removeClass('on');
if(e.key =="ArrowDown"){
if($('#add_div').children().length-1 <=select_div){
select_div = 0;
}else{
++select_div;
}
$('.tag'+select_div).addClass('on');
}else if(e.key == "ArrowUp"){
if( 0 >=select_div){
select_div = $('#add_div').children().length-1;
}else{
--select_div;
}
$('.tag'+select_div).addClass('on');
}
if(e.key == 'Enter'){
$('#sch_txt').val($('.tag'+select_div).html());
$('#add_div').empty();
select_div = -1;
}값이 있다면 모든 div의 class를 제거해준다.(이동할때 1개만 선택되기 위해)
키의 값을 비교해 위와 아래키에 반대되는 값을 넣어주고 맨마지막이나 맨위에서 한칸 더 이동할 시 반대편끝으로 보내주도록 만들어 준다.
마지막으로 엔터키 입력시 해당값을 input에 넣어주고 모든 div를 제거하고 선택값인 select_div값도 초기화시켜준다.
그러면 완료 !
대충 이런 느낌?... 완성코드
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <!-- JQuery 사용 -->
<script>
var language = ['python','C','Java','C++','C#','Visual Basic', 'Javascript','Assembly language','php','typescript'];
var low_language = language.map( v => v.toLowerCase());
var select_div = -1;
$(document).ready(function() {
$('#sch_txt').on('input', function () {
var cnt = 0;
$('#add_div').empty();
for(var i=0; i < language.length; i++){
if(low_language[i].includes($(this).val().toLowerCase())){
var add_html = "<div class='select tag"+cnt+"'>" + language[i] + '</div>';
$('#add_div').append(add_html);
cnt++;
}
}
if($('#add_div').children().length == '0'){
var add_html = '<div> 데이터가 없습니다. </div>';
$('#add_div').append(add_html);
}
})
$('#sch_txt').on('keyup',function (e) {
if($('#add_div').children().length == '0'){
return;
}
$('.select').removeClass('on');
if(e.key =="ArrowDown"){
if($('#add_div').children().length-1 <=select_div){
select_div = 0;
}else{
++select_div;
}
$('.tag'+select_div).addClass('on');
}else if(e.key == "ArrowUp"){
if( 0 >=select_div){
select_div = $('#add_div').children().length-1;
}else{
--select_div;
}
$('.tag'+select_div).addClass('on');
}
if(e.key == 'Enter'){
$('#sch_txt').val($('.tag'+select_div).html());
$('#add_div').empty();
select_div = -1;
}
})
})
</script>
<style>
.select{ width:180px;}
.select.on{
background: #4285F4;
}
</style>
<html>
<body>
<input type="text" name="sch_txt" id="sch_txt" oninput="this.value = this.value.replace(/[^A-Za-z]/g, '').replace(/(\..*)\./g, '$1');">
<div id="add_div"></div>
</body>
</html>
'개인 공부' 카테고리의 다른 글
| [php] 기본적인 함수 사용(strlen, number_fomat,substr) (0) | 2022.11.30 |
|---|---|
| [php] 기본적인 함수 사용_2 (timestamp,strotitome,date) (0) | 2022.11.22 |
| [php] 기본적인 함수 사용(explod,implod,isset,in_array) (0) | 2022.11.21 |
| [php] 정규식 사용 (0) | 2022.11.18 |
| [php] 핸드폰 번호에 - 넣기 (0) | 2022.11.15 |
