jquery는 Baidu와 유사한 검색 상자를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery는 Baidu와 유사한 검색 상자를 구현합니다.

小云云

Dec 04, 2017 am 10:42 AM

jquery 찾다 바이두

개발자로서 웹사이트를 개발할 때 검색창은 필수적인 기능이기도 합니다. 최근에는 Baidu의 검색창과 비슷하게 검색창을 만들어야 합니다. 이번 글에서는 Jquery의 검색창 구현에 대해 알려드리겠습니다. Baidu의 검색창과 유사한 검색창입니다.

두 가지 기능을 구현해야 합니다.

1. 키워드를 입력하고 일치하는 드롭다운 목록을 표시합니다.

2. 일치하는 항목을 선택하고 관련 콘텐츠를 찾습니다.

이 검색창은 일반 e에서도 자주 사용됩니다. - 먼저 분석 기능을 구현하려면 키워드를 입력하고 일치하는 항목 목록을 즉시 표시해야 합니다. 이 기능을 구현하려면 입력 상자에서 "입력" 이벤트를 바인딩한 다음 비동기 요청을 보내야 합니다. 페이지에 데이터를 표시하는 배경입니다. 마우스나 위쪽 및 아래쪽 키를 사용하여 일치하는 항목을 선택하고, 검색을 클릭하거나 "Enter" 키를 눌러 특정 결과를 검색하세요. 여기서는 두 개의 비동기 요청이 사용됩니다. 첫 번째 요청은 일치하는 항목을 요청하고 두 번째 요청은 검색 결과를 요청합니다. 키보드, 마우스 및 입력 상자 이벤트를 모니터링해야 하며 유연성도 고려해야 합니다. 즉, 다양한 유사한 요구 사항에 적응하는 것은 여전히 다음과 같이 잘 수행되지 않습니다.

1.html 및 css

<body>
    <div id="search-form"></div>
</body>
<style type="text/css">
    *{margin: 0;padding: 0;list-style:none;border:none;}
    body {
        font-family: "microsoft yahei" !important;
        background-color: #FDFFE0;
    }
    :focus {
        outline: none;
    }
    #search-form {
        position: relative;
        top: 50px;
        display: inline;
    }
</style>

로그인 후 복사

2. css 및 js 파일 가져오기

블로그에서는 파일을 업로드할 수 없으므로 내 git: http://git.oschina.net/manliu.com/search_frame으로 이동하여 완전한 프로젝트 파일

3. 페이지 참조 js

<script type="text/javascript">
var proposals = [&#39;百度1&#39;, &#39;百度2&#39;, &#39;百度3&#39;, &#39;百度4&#39;, &#39;百度5&#39;, &#39;百度6&#39;, &#39;百度7&#39;,&#39;17素材网&#39;,&#39;百度&#39;,&#39;新浪&#39;];
$(document).ready(function(){
    $(&#39;#search-form&#39;).complete({
        searchIn:function(val){//传入输入值，返回匹配值
            /* var reg = /^[\u4F00-\u9FA5\uF900-\uFA2D]/;
            return reg.test(val); */
            var word = "^"+val+".*";
            var rs = [];
            $.each(proposals,function(i,n){
                if(n.match(word)){
                    rs.push(n);
                }
            });
            return rs;
        },
        width:400,
        height: 30,
        submitIn: function(text){//搜索选定的值
            alert(text);        
        }
    });
});
</script>

로그인 후 복사

여기서는 일치하는 항목을 반환하는 데 사용됩니다. 일반적으로 비동기 요청이 정의되고, 데이터가 백그라운드에서 가져오고, 복잡한 항목의 경우 배열이 반환됩니다. 소스 코드를 수정해야 합니다. submitIn은 일반적으로 일치하는 결과를 비동기식 또는 동기식으로 요청할 수 있습니다.

위 내용은 바이두와 유사한 검색창을 구현하기 위한 쿼리 튜토리얼입니다. 모두에게 도움이 되기를 바랍니다.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

자바 튜토리얼

1664

Cakephp 튜토리얼

1423

라라벨 튜토리얼

1321

PHP 튜토리얼

1269

C# 튜토리얼

1249

Related knowledge

2개월 만에 휴머노이드 로봇 '워커S' 옷 개기 가능 Apr 03, 2024 am 08:01 AM

기계력 보고서 편집자: 우신(Wu Xin) 국내판 휴머노이드 로봇+대형 모델팀이 옷 접기 등 복잡하고 유연한 재료의 작업 작업을 처음으로 완료했습니다. OpenAI 멀티모달 대형 모델을 접목한 Figure01이 공개되면서 국내 동종업체들의 관련 진전이 주목받고 있다. 바로 어제, 중국의 "1위 휴머노이드 로봇 주식"인 UBTECH는 Baidu Wenxin의 대형 모델과 긴밀하게 통합되어 몇 가지 흥미로운 새로운 기능을 보여주는 휴머노이드 로봇 WalkerS의 첫 번째 데모를 출시했습니다. 이제 Baidu Wenxin의 대형 모델 역량을 활용한 WalkerS의 모습은 이렇습니다. Figure01과 마찬가지로 WalkerS는 움직이지 않고 책상 뒤에 서서 일련의 작업을 완료합니다. 인간의 명령을 따르고 옷을 접을 수 있습니다.

바이두 아폴로, L4 자율주행을 지원하는 세계 최초 대형 모델 '아폴로 ADFM' 출시 Jun 04, 2024 pm 08:01 PM

5월 15일, Baidu Apollo는 우한 Baidu Carrot Auto Robot Zhixing Valley에서 Apollo Day 2024를 개최하여 지난 10년 동안 Baidu의 자율 주행 분야의 주요 발전을 종합적으로 시연하고 대형 모델을 기반으로 한 기술 도약과 승객 안전에 대한 새로운 정의를 가져왔습니다. 세계 최대 자율주행차 운영 네트워크 바이두는 사람이 운전하는 것보다 자율주행을 더 안전하게 만들었습니다. 덕분에 더 안전하고, 더 편안하고, 친환경적이고, 저탄소 여행 방식이 이상에서 현실로 바뀌고 있습니다. 바이두 그룹 부사장이자 지능형 운전 비즈니스 그룹 사장인 왕윤펑(Wang Yunpeng)은 현장에서 "자율주행차를 만드는 우리의 원래 의도는 더 나은 여행에 대한 사람들의 점점 커지는 갈망을 충족시키는 것입니다. 사람들의 만족은 우리의 원동력입니다. 왜냐하면 안전, 너무 아름다워요, 만나서 반가워요

Alibaba Cloud Disk에서 다른 사람의 리소스를 검색하는 방법 Mar 30, 2024 am 10:31 AM

널리 사용되는 저장 도구인 Alibaba Cloud Disk는 개인 리소스를 효율적으로 관리하는 데 도움이 될 뿐만 아니라 다양한 편리한 기능을 제공합니다. 많은 사용자들이 검색 시 클라우드 디스크 리소스를 찾을 수 없기 때문에 전체 디스크에 있는 모든 리소스를 검색하고 싶어할 수 있습니다. 따라서 아래에서는 이 사이트의 편집자가 이 질문에 대해 자세히 답변하고 구체적인 검색 방법을 공유합니다. 더 알고 싶으시다면 이 기사를 따라가서 자세히 알아보세요! Alibaba Cloud Disk에서 다른 사람의 리소스를 검색하는 방법 1. 먼저 Alibaba Cloud Disk의 폴더 디렉터리에서 리소스 파일의 특정 경로를 검색하여 해당 폴더를 찾습니다. 2. 그런 다음 파일 검색 기능을 사용하여 찾고자 하는 키워드를 입력하여 해당 파일 내용을 찾으십시오. 3. 그런 다음 링크를 다른 사람들과 공유하여 직접 찾고 다운로드합니다.

Baidu Robin Li는 팀을 이끌고 PetroChina를 방문하여 석유 및 가스 산업의 정보를 논의했습니다. May 07, 2024 pm 06:13 PM

7일 해당 사이트 소식에 따르면 지난 5월 6일 바이두 창업자이자 회장 겸 CEO인 로빈 리가 팀을 이끌고 베이징에 있는 중국국영석유공사(이하 '페트로차이나')를 방문해 중국 국영기업 이사들을 만났다. 중국국영석유공사(China National Petroleum Corporation) 회장 겸 당 서기 Dai Houliang이 회담을 가졌습니다. 양측은 협력을 강화하고 에너지 산업과 디지털 인텔리전스의 심층적 통합을 촉진하기 위해 심도 있는 교류를 가졌습니다. PetroChina는 디지털 China Petroleum Corporation의 건설을 가속화하고 Baidu Group과의 협력을 강화하며 에너지 산업과 디지털 인텔리전스의 심층적 통합을 촉진하고 국가 에너지 안보 보장에 더 큰 기여를 할 것입니다. 로빈 리(Robin Li)는 대형 모델이 보여주는 '지능적 출현'과 이해, 생성, 논리, 기억의 핵심 역량이 첨단 기술과 석유 및 가스 사업의 결합을 위한 더 넓은 상상력의 공간을 열었다고 말했습니다. 언제나

DeepSeek 웹 버전 입구 DeepSeek 공식 웹 사이트 입구 Feb 19, 2025 pm 04:54 PM

DeepSeek은 웹 버전과 공식 웹 사이트의 두 가지 액세스 방법을 제공하는 강력한 지능형 검색 및 분석 도구입니다. 웹 버전은 편리하고 효율적이며 설치없이 사용할 수 있습니다. 개인이든 회사 사용자이든, DeepSeek를 통해 대규모 데이터를 쉽게 얻고 분석하여 업무 효율성을 향상시키고 의사 결정을 지원하며 혁신을 촉진 할 수 있습니다.

Baidu Xiyang Shells 획득 방법 소개 Mar 28, 2024 am 09:11 AM

시랑에는 포탄이 어디에 있는지, 어떻게 얻는지 모르는 사용자가 많습니다. 일부 플레이어는 몇 시간 동안 검색했지만 여전히 찾을 수 없습니다. 아래에서 편집자가 바이두 시랑 포탄을 얻는 방법을 알려드리겠습니다. . 와서 보세요. Baidu Xirang Shell을 얻는 방법 1. 먼저 커뮤니티에 접속한 후 아래 사진의 위치로 와야 합니다. 2. 이곳에서 목적지를 선택하고 188층 입장을 선택하세요. 3. 188층에 입장하신 후 돌아다니시면 이런 안내가 나옵니다. I Got It을 클릭하시면 됩니다. 4. 껍데기의 위치는 찾기가 조금 어려울 수 있습니다. 188 엘리베이터 바로 뒤에는 껍데기라는 작은 빛나는 점이 있습니다. 5. 껍질을 집으려면 VR 컨트롤러를 사용해야 합니다. 껍질을 클릭하기만 하면 됩니다. 상환 방법 1. 먼저 페이지 오른쪽 상단에 있는 "설정" 아이콘을 클릭하고 "

삼성전자 갤럭시S24 시리즈 휴대폰 '서치인서클(Search in Circle)' 중국판이 구글 검색을 지원할 것으로 알려졌다. Jun 01, 2024 am 09:54 AM

31일 뉴스에 따르면 블로거 @ibinguniverse는 오늘 삼성 갤럭시 S24 시리즈 휴대폰 중국 버전 '서치 인 서클(Search in Circle)'이 구글 검색을 지원한다는 소식을 전했습니다. 블로거는 구체적인 출시 시간을 공개하지 않았습니다. 삼성의 이전 소개에 따르면 삼성 갤럭시 S24 시리즈는 입력, 번역, 녹음, 메모, 카메라 등 AI 기반의 실용적인 기능과 높은 수준의 AI 기능을 탑재해 사용자에게 보다 편리하고 효율적인 종합 서비스를 제공한다. 경험. 해외 버전과 달리 삼성 갤럭시 S24 시리즈의 AI 기능은 대부분 바이두 등 국내 제조사에서 제공하고 있다. 이전에 보고된 Galaxy AI는 Baidu Wenxin 대형 모델의 여러 기능을 심층적으로 통합하여 최종 지원 통화 및 번역 기능은 물론 생성 AI가 제공하는 지능형 요약을 제공할 수 있습니다.

Baidu Wenxin Big Model 4.0 Turbo는 Wenxin Yiyan 4.0의 일반 버전에 비해 가격이 70% 인하되어 기업에 공개됩니다. Jul 11, 2024 pm 07:14 PM

7월 5일 이 사이트의 소식에 따르면 바이두는 6월 28일 WAVESUMMIT 딥러닝 개발자 컨퍼런스에서 새로운 Wenxin Large Model 4.0 Turbo 버전을 출시했습니다. Wenxin 대형 모델 버전 4.0과 비교하여 Turbo는 더 빠른 응답 속도와 더 강력한 검색 기능을 제공합니다. 오늘 2024년 세계 인공 지능 컨퍼런스에서 Xie Guangjun Baidu 부사장은 Wenxinyiyan 4.0 Turbo가 공식적으로 기업에 완전히 개방되었다고 말했습니다. 가격은 입력의 경우 0.03위안/천 토큰이고 출력의 경우 0.06위안/천 토큰입니다. : 1 입력 및 출력 길이 통계에 따르면 Wenxin Yiyan 4.0 일반 버전의 가격 인하는 70%입니다. "Baidu는 강력한 기본 대형 모델을 기반으로 Wenxin 대형 모델이 더욱 혁신을 창출한다고 말했습니다.

See all articles