V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
drawstar
V2EX  ›  问与答

小白求助, JQuery 的 autocomplete 问题

  •  
  •   drawstar · 2021-05-13 16:46:55 +08:00 · 667 次点击
    这是一个创建于 1050 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想实现的功能: 根据 select 的值,另一个 input 提供相应的 availableTags 来提示输入。比如 select 选择北京,那 input 就提供北京相关的 availableTags

    没接触过前端,目前探索到这里,应付下作业:

    使用 Jquery 的 autocomplete 。点击按钮,想实现 availableTags2 里的提示,但是没反应(是不是生成 html 的时候 id 就固定了?)。

    请问该如何修改?

    
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 自动完成( Autocomplete ) - 默认功能</title>
      <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
      <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="jqueryui/style.css">
      <script>
      $(function() {
        var availableTags1 = ["ActionScript","AppleScript","Asp"];
    	var availableTags2 = ["Basic","Basketball", "Banana" ];
        $( "#availableTags1" ).autocomplete({
          source: availableTags1
        });
        $( "#availableTags2" ).autocomplete({
          source: availableTags2
        });
      });
      </script>
    </head>
    <body>
     
     <input id="availableTags1"><button type="button" onclick="myFunction0()"> 使用 tags2 </button> 
    <script>
    function myFunction0()
    {
        document.getElementById("availableTags1").id= "availableTags2"
    };
    </script>
     
     
    </body>
    </html>
    
    
    第 1 条附言  ·  2021-05-13 17:25:20 +08:00
    第 2 条附言  ·  2021-05-13 19:18:14 +08:00
    解决了 换成了 datalist
    7 条回复    2021-05-14 11:45:33 +08:00
    waiaan
        1
    waiaan  
       2021-05-13 17:14:30 +08:00
    script 放到 body 标签最底下。
    drawstar
        2
    drawstar  
    OP
       2021-05-13 17:21:50 +08:00
    @waiaan 好像没有用
    DOLLOR
        3
    DOLLOR  
       2021-05-13 17:50:27 +08:00
    $( "#availableTags2" ).XXXX 执行的时候页面并不存在 id="availableTags2"元素,后面做什么都没用了。
    你应该另外创建一个 id="availableTags2"的元素,让$( "#availableTags2" ).XXXX 绑上去。
    drawstar
        4
    drawstar  
    OP
       2021-05-13 17:56:25 +08:00
    @DOLLOR 我试了下,单击按钮还是切换不了啊。。。
    DOLLOR
        5
    DOLLOR  
       2021-05-13 18:01:35 +08:00
    我的意思是你做两个输入框,不要弄点击按钮切换。修改元素的 ID 是极少出现的场景。
    drawstar
        6
    drawstar  
    OP
       2021-05-13 18:08:49 +08:00
    @DOLLOR 但是我有 50 个这样的 avaliableTags...,总不能设置 50 个 input 吧
    codder
        7
    codder  
       2021-05-14 11:45:33 +08:00
    wws.[删掉]lanzoui.com[删掉]/iSClqp43q1e
    你下载下来看看是不是你想要的效果,将 [删掉] 都删掉后访问地址
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5421 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 07:37 · PVG 15:37 · LAX 00:37 · JFK 03:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.