如何在没有数据库的图像上实现搜索功能

时间：2017-03-14 00:00:41

标签： javascript jquery css html5

您好我正在尝试编写一个代码，允许用户搜索图书名称并仅显示具有该特定名称的图书。但由于某种原因，搜索功能不起作用

到目前为止，这是我的代码：

      var search = $("#search-criteria");
  var items  = $(".image-wrap");

  $("#search").on("click", function(e){

       var v = search.val().toLowerCase();
      if(v == "") {
          items.show();
          return;
      }
       $.each(items, function(){
           var it = $(this);
           var lb = it.find("id").text().toLowerCase();
           console.log( lb + " --- " + v);
           if(lb.indexOf(v) == -1)
                it.hide();
       });
   });
});
  .review-img {
  cursor: pointer;
  height: 160px; // height
  //width: 30%; // width
  }
    <form>
          <div> <input type="text" id="search-criteria" id="searchText"/>
    <input type="button" id="search" value="search" onClick="tes();"/> </div>
         </form>

    <section class='images'>
<img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"></img>
<img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"></img>    
<img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"></img>
<img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"></img>
</section>

3 个答案:

答案 0 :(得分：1)

我建议你查看这一行：

var lb = it.find("id").text().toLowerCase();

看看find做了什么--- find("id")没有给你每个元素的ID。

答案 1 :(得分：1)

作为脚本

的一部分，还有一些更改要做 
<script type="text/javascript">    
    $(document).on("click","#search",function(e){
           var search = $("#search-criteria");
           var items  = $(".review-img");
           var v = search.val().toLowerCase();
           if(v == "") {
              items.show();
              return;
           }
           $.each(items, function(){
               var it = $(this);
               var lb = it.attr("id").toLowerCase();
               console.log( lb + " --- " + v);
               if(lb===v)
                    it.show();
                else
                    it.hide();
           });

      });
    </script>

这应该可以正常工作。同时从输入按钮中删除onClick，因为我们将根据按钮的id执行搜索。

如果您对此代码有任何其他说明，请询问我

答案 2 :(得分：0)

您可以使用<datalist>元素，并为每个.value <option>设置.image img个子id个元素; list元素的#search-criteria属性设置为id元素的<datalist>。致电.hide()元素.images img。 click #search .show() .value #search-criteria <img>位$(".images img").each(function() { $("#images").append(new Option(this.id, this.id)); }).hide(); $("#search").on("click", function(e) { e.preventDefault(); $(".images img").hide() .filter("#" + $("#search-criteria").val()) .show() });。

注意，<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <form> <div> <input type="text" id="search-criteria" id="searchText" list="images" /> <input type="button" id="search" value="search" /> <datalist id="images"></datalist> </div> </form> <section class='images'> <img class="review-img" id="lifeofpi" src="https://images-na.ssl-images-amazon.com/images/I/51atapp7YTL._AC_US320_QL65_.jpg" alt="lifeofpi"> <img class="review-img" id="kiterunner" src="https://images-na.ssl-images-amazon.com/images/I/51MtGFNeYjL._AC_US320_QL65_.jpg" alt="kiterunner"> <img class="review-img" id="starwars" src="https://images-na.ssl-images-amazon.com/images/I/51oqkfvEwZL._AC_US320_QL65_.jpg" alt="starwars"> <img class="review-img" id="twilight" src="https://images-na.ssl-images-amazon.com/images/I/41K99+cInvL._AC_US320_QL65_.jpg" alt="twilight"> </section>标记是自动关闭的。

Underlying, Strike, Time, Rate, Volatility

C:\dart\dartium\src>.\dart\tools\dartium\build.py --mode=Release
Running:  ninja -j4 -C out\Release content_shell chrome blink_tests
ninja: Entering directory `out\Release'
[16/1415] LINK_EMBED delegate_execute.exe
uuid.lib(objidl_i.obj) : MSIL .netmodule or module compiled with /GL found; restarting link with /LTCG; add /LTCG to the link command line to improve linker performance
Generating code
Finished generating code
[32/1415] LINK_EMBED(DLL) chrome_child.dll
FAILED: chrome_child.dll chrome_child.dll.lib chrome_child.dll.pdb
C:\src\depot_tools\python276_bin\python.exe gyp-win-tool link-with-manifests environment.x86 True chrome_child.dll "C:\src\depot_tools\python276_bin\python.exe gyp-win-tool link-wrapper environment.x86 False link.exe /nologo /IMPLIB:chrome_child.dll.lib /DLL /OUT:chrome_child.dll @chrome_child.dll.rsp" 2 mt.exe rc.exe "obj\chrome\chrome_child_dll.chrome_child.dll.intermediate.manifest" obj\chrome\chrome_child_dll.chrome_child.dll.generated.manifest
uuid.lib(cguid_i.obj) : MSIL .netmodule or module compiled with /GL found; restarting link with /LTCG; add /LTCG to the link command line to improve linker performance
ffmpeg.lib(ffmpeg.wavdec.obj) : error LNK2001: unresolved external symbol _ff_w64_guid_data
chrome_child.dll : fatal error LNK1120: 1 unresolved externals
Traceback (most recent call last):
  File "gyp-win-tool", line 313, in <module>
    sys.exit(main(sys.argv[1:]))
  File "gyp-win-tool", line 29, in main
    exit_code = executor.Dispatch(args)
  File "gyp-win-tool", line 71, in Dispatch
    return getattr(self, method)(*args[1:])
  File "gyp-win-tool", line 169, in ExecLinkWithManifests
    subprocess.check_call(ldcmd + add_to_ld)
  File "C:\src\depot_tools\python276_bin\lib\subprocess.py", line 540, in check_call
    raise CalledProcessError(retcode, cmd)
subprocess.CalledProcessError: Command 'C:\src\depot_tools\python276_bin\python.exe gyp-win-tool link-wrapper environment.x86 False link.exe /nologo /IMPLIB:chrome_child.dll.lib /DLL /OUT:chrome_child.dll @chrome_child.dll.rsp chrome_child.dll.manifest.res' returned non-zero exit status 1120
[34/1415] LINK_EMBED blink_heap_unittests.exe
uuid.lib(cguid_i.obj) : MSIL .netmodule or module compiled with /GL found; restarting link with /LTCG; add /LTCG to the link command line to improve linker performance
Generating code
Finished generating code
[35/1415] LINK_EMBED webkit_unit_tests.exe
uuid.lib(cguid_i.obj) : MSIL .netmodule or module compiled with /GL found; restarting link with /LTCG; add /LTCG to the link command line to improve linker performance
Generating code
Finished generating code
ninja: build stopped: subcommand failed.
Traceback (most recent call last):
  File "C:\dart\dartium\src\dart\tools\dartium\build.py", line 56, in <module>
    main()
  File "C:\dart\dartium\src\dart\tools\dartium\build.py", line 53, in main
    + targets)
  File "C:\dart\dartium\src\dart\tools\dartium\utils.py", line 112, in runCommand
    raise Exception('Failed to run command. return code=%s' % p.returncode)
Exception: Failed to run command. return code=1

相关问题
最新问题