자동 완성 텍스트 상자에서 선택한 값에 CSS를 사용하는 방법

만약

클라이언트가 자동 완성 텍스트 상자에서 항목을 선택할 때마다 텍스트 상자 바로 아래에 내가 만든 div에 자동으로 나타납니다. 전체 div가 아닌 div에 나타나는 선택된 항목을 CSS로 스타일을 지정하고 싶습니다 . 예를 들어 선택한 모든 항목이 검은 색 테두리로 표시되기를 원합니다. (div에서 CSS를 쉽게 사용할 수 있지만 선택한 각 항목이 아닌 전체 div에 대한 테두리가 표시됩니다).

그것이 JS 코드입니다. 내가 필요한 것은 새로운 선택된 국가에 CSS를 추가하는 것입니다.

$(function() {
     /* Textbox ID */ $("#destinations").autocomplete({
        select: function (event, ui) {
           /* div ID */ $("#DestinationsChosen").html(function(i, origText)
            {
                var SelectedCountry = ui.item.value.toString();
                var CurrentText = origText.toString();
                if ((CurrentText.indexOf(SelectedCountry) >= 0))
                {
                    alert("Already Exists");
                    return CurrentText;
                }
                return CurrentText + " " + SelectedCountry;
            })
        }
    });
})

전체 코드는 다음과 같습니다. http://jsfiddle.net/3zfcb04k/

Ahs N

이것을 변경하십시오 :

return CurrentText + " " + SelectedCountry;

이에:

return CurrentText + " <span>" + SelectedCountry + "</span><br/>";

그런 다음 span태그에 CSS를 적용합니다 .

다음은 업데이트 된 JSFiddle입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

DevExtreme을 사용하여 angularJS에서 자동 완성 텍스트 상자 값을 얻는 방법

분류에서Dev

자동 완성 텍스트 상자를 설정하는 방법 C # 클래스에서 자동 완성 값의 제안

분류에서Dev

ActiveControl 텍스트 상자에서 선택한 텍스트를 복사하는 방법

분류에서Dev

데이터베이스 값을 사용하여 자동 완성 텍스트 상자를 만드는 방법

분류에서Dev

텍스트 상자의 날짜 값을 사용하여 달력에서 날짜를 선택하는 방법

분류에서Dev

자동 완성에서 선택한 항목의 가치를 얻는 방법

분류에서Dev

반응에서 사용자가 선택한 옵션의 텍스트를 선택하여 텍스트를 복사하는 방법을 선택합니다.

분류에서Dev

C # (SWF)의 텍스트 상자에서 선택한 텍스트를 삭제하는 방법

분류에서Dev

자동 완성 텍스트 상자 jquery에서 배열을 사용하는 방법은 무엇입니까?

분류에서Dev

자동 완성 텍스트 상자 jquery에서 배열을 사용하는 방법은 무엇입니까?

분류에서Dev

PyQt5 QCompleter 자동 완성 텍스트를 선택한 후 QLineEdit를 지우는 방법

분류에서Dev

VSTO C # 추가 기능의 Excel 셀에서 자동 완성 텍스트 상자를 만드는 방법

분류에서Dev

런타임에 생성 된 선택한 텍스트 상자를 삭제하는 방법

분류에서Dev

탭보기로 선택한보기 (사용자 정의 컨트롤)에서 텍스트 상자에 포커스를 설정하는 방법

분류에서Dev

C # .net에서 데이터베이스 반환 값을 사용하여 자동 완성 텍스트 상자에 대한 코드를 원합니다.

분류에서Dev

재료 UI 자동 완성의 입력 텍스트 필드에 선택한 값을 표시하는 방법은 무엇입니까?

분류에서Dev

한 텍스트 상자에서 다른 텍스트 상자로 포커스를 이동하는 방법?

분류에서Dev

jquery를 사용하여 선택 옵션에 값이있는 경우 텍스트 상자를 비활성화하는 방법

분류에서Dev

선택하기 전에 값이 0 일 때 텍스트 상자를 비활성화하는 방법

분류에서Dev

동일한 클래스를 가진 텍스트 상자의 값을 합산하고 jquery를 사용하여 다른 텍스트 상자에 넣는 방법

분류에서Dev

선택 값을 텍스트 상자에 에코하는 방법

분류에서Dev

HTML의 텍스트 상자에 자동 완성 jquery UI를 표시하는 방법

분류에서Dev

자바 스크립트 문제를 사용하여 텍스트 상자에서 선택한 값

분류에서Dev

선택한 자동 완성을 사용하는 ajax 방법

분류에서Dev

jquery에서 checkox가 선택되었을 때 텍스트 상자를 비활성화하는 방법

분류에서Dev

jquery에서 checkox가 선택되었을 때 텍스트 상자를 비활성화하는 방법

분류에서Dev

셀레늄 C #을 사용하여 자동 완성 텍스트 상자를 테스트하는 방법

분류에서Dev

텍스트 상자 MVP C #에서 선택한 행을 표시하는 방법

분류에서Dev

javascript를 사용하여 gridview에서 텍스트 상자 값을 얻는 방법

Related 관련 기사

  1. 1

    DevExtreme을 사용하여 angularJS에서 자동 완성 텍스트 상자 값을 얻는 방법

  2. 2

    자동 완성 텍스트 상자를 설정하는 방법 C # 클래스에서 자동 완성 값의 제안

  3. 3

    ActiveControl 텍스트 상자에서 선택한 텍스트를 복사하는 방법

  4. 4

    데이터베이스 값을 사용하여 자동 완성 텍스트 상자를 만드는 방법

  5. 5

    텍스트 상자의 날짜 값을 사용하여 달력에서 날짜를 선택하는 방법

  6. 6

    자동 완성에서 선택한 항목의 가치를 얻는 방법

  7. 7

    반응에서 사용자가 선택한 옵션의 텍스트를 선택하여 텍스트를 복사하는 방법을 선택합니다.

  8. 8

    C # (SWF)의 텍스트 상자에서 선택한 텍스트를 삭제하는 방법

  9. 9

    자동 완성 텍스트 상자 jquery에서 배열을 사용하는 방법은 무엇입니까?

  10. 10

    자동 완성 텍스트 상자 jquery에서 배열을 사용하는 방법은 무엇입니까?

  11. 11

    PyQt5 QCompleter 자동 완성 텍스트를 선택한 후 QLineEdit를 지우는 방법

  12. 12

    VSTO C # 추가 기능의 Excel 셀에서 자동 완성 텍스트 상자를 만드는 방법

  13. 13

    런타임에 생성 된 선택한 텍스트 상자를 삭제하는 방법

  14. 14

    탭보기로 선택한보기 (사용자 정의 컨트롤)에서 텍스트 상자에 포커스를 설정하는 방법

  15. 15

    C # .net에서 데이터베이스 반환 값을 사용하여 자동 완성 텍스트 상자에 대한 코드를 원합니다.

  16. 16

    재료 UI 자동 완성의 입력 텍스트 필드에 선택한 값을 표시하는 방법은 무엇입니까?

  17. 17

    한 텍스트 상자에서 다른 텍스트 상자로 포커스를 이동하는 방법?

  18. 18

    jquery를 사용하여 선택 옵션에 값이있는 경우 텍스트 상자를 비활성화하는 방법

  19. 19

    선택하기 전에 값이 0 일 때 텍스트 상자를 비활성화하는 방법

  20. 20

    동일한 클래스를 가진 텍스트 상자의 값을 합산하고 jquery를 사용하여 다른 텍스트 상자에 넣는 방법

  21. 21

    선택 값을 텍스트 상자에 에코하는 방법

  22. 22

    HTML의 텍스트 상자에 자동 완성 jquery UI를 표시하는 방법

  23. 23

    자바 스크립트 문제를 사용하여 텍스트 상자에서 선택한 값

  24. 24

    선택한 자동 완성을 사용하는 ajax 방법

  25. 25

    jquery에서 checkox가 선택되었을 때 텍스트 상자를 비활성화하는 방법

  26. 26

    jquery에서 checkox가 선택되었을 때 텍스트 상자를 비활성화하는 방법

  27. 27

    셀레늄 C #을 사용하여 자동 완성 텍스트 상자를 테스트하는 방법

  28. 28

    텍스트 상자 MVP C #에서 선택한 행을 표시하는 방법

  29. 29

    javascript를 사용하여 gridview에서 텍스트 상자 값을 얻는 방법

뜨겁다태그

보관