我有一个初级到中级网络开发知识，我正在做一个网页，询问人们一些个人数据。
这是关于失业的非正式研究
这是我托管page的地方（用巴西葡萄牙语）。
我有一份来自“就业部”网站的职业列表，我在这个SELECT字段中显示这个列表：
<?php
$ocupacoes = file('ocupacoes');
$options = '<option selected disabled>Selecione uma ocupação</option>';
foreach ($ocupacoes as $ocupacao) {
$options .= '<option value="'.$ocupacao.'">'.$ocupacao.'</option>';
}
$select = '<select id="ocupacoes" name="ocupacao">'.$options.'</select>';
echo $select;
?>
现在这就是我想要的：
人们可以轻松搜索自己的职业，特别是因为人们经常通过智能手机访问网站（在智能手机中搜索包含数百个选项的列表中的选项很痛苦）。
我尝试使用Select2和Selectize执行此操作，但没有成功
也许是因为我试过在PHP代码之后使用它，我不知道
我找到了datalist标签，但我不想使用它，因为人们必须选择预定义的条目
我发现JQuery UI可以提供帮助，但我不知道该怎么做。
我需要一些帮助/光明，因为我无法自己解决这个问题。
我也接受一些关于web-dev和/或我的代码的提示，因为页面是链接的。
编辑：JQuery没有定义。所以答案是我必须重新安排文件的导入，以便首先导入JQuery，然后才能导入select2 。 感谢https://stackoverflow.com/users/3367974/mehdi-dehghani帮助我通过控制台查看器找到它。
答案 0 :(得分：0)
<html>
<head>
<title>Projeto 02 - Desenvolvimento WEB</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://kelvin.96.lt/centralizaDivs.css">
<link rel="stylesheet" type="text/css" href="http://kelvin.96.lt/style.css">
<script type="text/javascript" src="http://kelvin.96.lt/validadores.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<legend id="formul">Formulário de pesquisa sobre desemprego</legend>
<form name="cadastro" action="index.php" method="post" onsubmit="return validaForm()">
<fieldset id="desemp">
<legend>Está desempregado?</legend>
<input type="radio" name="desempregado" value=1 id="d_sim" onclick="return validaOcupac()">
<label for="d_sim">Sim</label><br>
<input type="radio" name="desempregado" value=0 id="d_nao" onclick="return validaOcupac()">
<label for="d_nao">Não</label>
</fieldset>
<fieldset id="sex">
<legend>Selecione seu sexo</legend>
<input type="radio" name="sexo" value="Masculino" id="s_masculino">
<label for="s_masculino">Masculino</label><br>
<input type="radio" name="sexo" value="Feminino" id="s_feminino">
<label for="s_feminino">Feminino</label><br>
<input type="radio" name="sexo" value="Outros" id="s_outros">
<label for="s_outros">Outros</label>
</fieldset>
<fieldset>
<legend>Selecione seu nível de escolaridade</legend>
<select name="escolaridade">
<option selected disabled>Selecione o nível</option>
<option>Fundamental</option>
<option>Médio</option>
<option>Superior</option>
<option>Pós graduação</option>
</select><br>
<select name="emcurso">
<option selected disabled>-------------</option>
<option>Completo</option>
<option>Incompleto</option>
<option>Cursando</option>
</select>
</fieldset>
<fieldset>
<legend>De onde você é?</legend>
<select id="estados" name="estado">
</select><br>
<select id="cidades" name="cidade">
</select>
</fieldset>
<fieldset>
<legend>Idade</legend>
<input type="number" placeholder="Quantos anos você tem?" id="i_idade" name="idade">
</fieldset>
<fieldset>
<legend>Ocupação</legend>
<select id="ocupacoes" name="ocupacao">
<option selected disabled>Selecione uma ocupação</option><option value="Abatedor">Abatedor</option><option value="Acabador de calçados">Acabador de calçados</option>
<option value="Acabador de embalagens (flexíveis e cartotécnicas)">Acabador de embalagens (flexíveis e cartotécnicas)</option>
</select>
</fieldset>
<div id="botoes">
<input type="submit"> <input type="reset">
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#ocupacoes").select2();
$.getJSON('estados_cidades.json', function (data) {
var items = [];
var options = '<option selected disabled>Selecione seu estado</option>';
$.each(data, function (key, val) {
options += '<option value="' + val.nome + '">' + val.nome + '</option>';
});
$("#estados").html(options);
$("#estados").change(function () {
var options_cidades = '';
var str = "";
$("#estados option:selected").each(function () {
str += $(this).text();
});
$.each(data, function (key, val) {
if(val.nome == str) {
$.each(val.cidades, function (key_city, val_city) {
options_cidades += '<option value="' + val_city + '">' + val_city + '</option>';
});
}
});
$("#cidades").html(options_cidades);
}).change();
});
});
</script>
</body>
</html>
答案 1 :(得分：0)
使用select2将解决您的问题， 只需导入jquery + CSS + JS select2并编写呈现输入的脚本，如下所示：
$(function(){
$("#ocupacoes").select2();
});
见下文工作snipet：
$(function(){
$("#ocupacoes").select2();
});#ocupacoes {
width:80%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" />
<select id="ocupacoes" name="ocupacao">
<option selected="" disabled="">Selecione uma ocupação</option><option value="Abatedor
">Abatedor
</option><option value="Acabador de calçados
">Acabador de calçados
</option><option value="Acabador de embalagens (flexíveis e cartotécnicas)
">Acabador de embalagens (flexíveis e cartotécnicas)
</option><option value="Acabador de superfícies de concreto
">Acabador de superfícies de concreto
</option><option value="Açougueiro
">Açougueiro
</option><option value="Acrobata
">Acrobata
</option><option value="Adestrador de animais
">Adestrador de animais
</option><option value="Administrador
">Administrador
</option><option value="Administrador de banco de dados
">Administrador de banco de dados
</option><option value="Operador de bomba de concreto
">Operador de bomba de concreto
</option><option value="Operador de branqueador de pasta para fabricação de papel
">Operador de branqueador de pasta para fabricação de papel
</option><option value="Operador de britadeira (tratamentos químicos e afins)
">Operador de britadeira (tratamentos químicos e afins)
</option><option value="Operador de britador de coque
">Operador de britador de coque
</option><option value="Operador de britador de mandíbulas
">Operador de britador de mandíbulas
</option><option value="Operador de cabine de laminação (fio-máquina)
">Operador de cabine de laminação (fio-máquina)
</option><option value="Operador de caixa
">Operador de caixa
</option><option value="Operador de calandra (química, petroquímica e afins)
">Operador de calandra (química, petroquímica e afins)
</option><option value="Operador de calandras (tecidos)
">Operador de calandras (tecidos)
</option><option value="Operador de calcinação (tratamento químico e afins)
">Operador de calcinação (tratamento químico e afins)
</option><option value="Operador de caldeira
">Operador de caldeira
</option><option value="Operador de câmaras frias
">Operador de câmaras frias
</option><option value="Operador de câmera de televisão
">Operador de câmera de televisão
</option><option value="Operador de caminhão (minas e pedreiras)
">Operador de caminhão (minas e pedreiras)
</option><option value="Operador de cardas
">Operador de cardas
</option><option value="Operador de carregadeira
">Operador de carregadeira
</option><option value="Operador de carro de apagamento e coque
">Operador de carro de apagamento e coque
</option><option value="Operador de ceifadeira na conservação de vias permanentes
">Operador de ceifadeira na conservação de vias permanentes
</option><option value="Operador de central de concreto
">Operador de central de concreto
</option><option value="Operador de central de rádio
">Operador de central de rádio
</option><option value="Operador de central hidrelétrica
">Operador de central hidrelétrica
</option><option value="Operador de central termoelétrica
">Operador de central termoelétrica
</option><option value="Operador de centrifugadora (tratamentos químicos e afins)
">Operador de centrifugadora (tratamentos químicos e afins)
</option><option value="Operador de centro de controle
">Operador de centro de controle
</option><option value="Operador de centro de controle (ferrovia e metrô)
">Operador de centro de controle (ferrovia e metrô)
</option><option value="Operador de centro de usinagem com comando numérico
">Operador de centro de usinagem com comando numérico
</option><option value="Operador de centro de usinagem de madeira (cnc)
">Operador de centro de usinagem de madeira (cnc)
</option><option value="Operador de chamuscadeira de tecidos
">Operador de chamuscadeira de tecidos
</option><option value="Operador de cobrança bancária
">Operador de cobrança bancária
</option><option value="Operador de colhedor florestal
">Operador de colhedor florestal
</option><option value="Operador de colheitadeira
">Operador de colheitadeira
</option><option value="Operador de compactadora de solos
">Operador de compactadora de solos
</option><option value="Operador de compressor de ar
">Operador de compressor de ar
</option><option value="Operador de computador (inclusive microcomputador)
">Operador de computador (inclusive microcomputador)
</option><option value="Operador de concentração
">Operador de concentração
</option><option value="Operador de conicaleira
">Operador de conicaleira
</option><option value="Operador de cortadeira de papel
">Operador de cortadeira de papel
</option><option value="Operador de cristalização na refinação de açucar
">Operador de cristalização na refinação de açucar
</option><option value="Operador de desempenadeira na usinagem convencional de madeira
">Operador de desempenadeira na usinagem convencional de madeira
</option><option value="Operador de desgaseificação
">Operador de desgaseificação
</option><option value="Operador de destilação e subprodutos de coque
">Operador de destilação e subprodutos de coque
</option><option value="Operador de digestor de pasta para fabricação de papel
">Operador de digestor de pasta para fabricação de papel
</option><option value="Operador de docagem
">Operador de docagem
</option><option value="Operador de draga
">Operador de draga
</option><option value="Operador de empilhadeira
">Operador de empilhadeira
</option><option value="Operador de enfornamento e desenfornamento de coque
">Operador de enfornamento e desenfornamento de coque
</option><option value="Operador de engomadeira de urdume
">Operador de engomadeira de urdume
</option><option value="Operador de entalhadeira (usinagem de madeira)
">Operador de entalhadeira (usinagem de madeira)
</option><option value="Operador de equipamento de destilação de álcool
">Operador de equipamento de destilação de álcool
</option><option value="Operador de equipamento de secagem de pintura
">Operador de equipamento de secagem de pintura
</option><option value="Operador de equipamento para resfriamento
">Operador de equipamento para resfriamento
</option><option value="Operador de equipamentos de preparação de areia
">Operador de equipamentos de preparação de areia
</option><option value="Operador de equipamentos de refinação de açúcar (processo contínuo)
">Operador de equipamentos de refinação de açúcar (processo contínuo)
</option><option value="Operador de escavadeira
">Operador de escavadeira
</option><option value="Operador de escória e sucata
">Operador de escória e sucata
</option><option value="Operador de esmaltadeira
">Operador de esmaltadeira
</option><option value="Operador de espelhamento
">Operador de espelhamento
</option><option value="Operador de espessador
">Operador de espessador
</option><option value="Operador de espuladeira
">Operador de espuladeira
</option><option value="Operador de estação de bombeamento
">Operador de estação de bombeamento
</option><option value="Operador de estação de captação, tratamento e distribuição de água
">Operador de estação de captação, tratamento e distribuição de água
</option><option value="Operador de estação de tratamento de água e efluentes
">Operador de estação de tratamento de água e efluentes
</option><option value="Operador de evaporador na destilação
">Operador de evaporador na destilação
</option><option value="Operador de exaustor (coqueria)
">Operador de exaustor (coqueria)
</option><option value="Operador de exploração de petróleo
">Operador de exploração de petróleo
</option><option value="Operador de externa (rádio)
">Operador de externa (rádio)
</option><option value="Operador de extração de café solúvel
">Operador de extração de café solúvel
</option><option value="Operador de extrusora (química, petroquímica e afins)
">Operador de extrusora (química, petroquímica e afins)
</option><option value="Pesquisador de engenharia metalúrgica, de minas e de materiais
">Pesquisador de engenharia metalúrgica, de minas e de materiais
</option><option value="Pesquisador de engenharia química
">Pesquisador de engenharia química
</option><option value="Pesquisador de medicina básica
">Pesquisador de medicina básica
</option><option value="Pesquisador em biologia ambiental
">Pesquisador em biologia ambiental
</option><option value="Pesquisador em biologia animal
">Pesquisador em biologia animal
</option><option value="Pesquisador em biologia de microorganismos e parasitas
">Pesquisador em biologia de microorganismos e parasitas
</option><option value="Pesquisador em biologia humana
">Pesquisador em biologia humana
</option><option value="Pesquisador em biologia vegetal
">Pesquisador em biologia vegetal
</option><option value="Pesquisador em ciências agronômicas
">Pesquisador em ciências agronômicas
</option><option value="Pesquisador em ciências da computação e informática
">Pesquisador em ciências da computação e informática
</option><option value="Pesquisador em ciências da educação
">Pesquisador em ciências da educação
</option><option value="Pesquisador em ciências da pesca e aqüicultura
">Pesquisador em ciências da pesca e aqüicultura
</option><option value="Pesquisador em ciências da terra e meio ambiente
">Pesquisador em ciências da terra e meio ambiente
</option><option value="Pesquisador em ciências da zootecnia
">Pesquisador em ciências da zootecnia
</option><option value="Pesquisador em ciências florestais
">Pesquisador em ciências florestais
</option><option value="Publicitário
">Publicitário
</option><option value="Pugilista
">Pugilista
</option><option value="Queijeiro na fabricação de laticínio
">Queijeiro na fabricação de laticínio
</option><option value="Químico
">Químico
</option><option value="Químico industrial
">Químico industrial
</option><option value="Quiropraxista
">Quiropraxista
</option><option value="Rachador de couros e peles
">Rachador de couros e peles
</option><option value="Radiotelegrafista
">Radiotelegrafista
</option><option value="Raizeiro
">Raizeiro
</option><option value="Rebaixador de couros
">Rebaixador de couros
</option><option value="Rebarbador de metal
">Rebarbador de metal
</option><option value="Rebitador a martelo pneumático
">Rebitador a martelo pneumático
</option><option value="Rebitador, a mão
">Rebitador, a mão
</option><option value="Recebedor de apostas (loteria)
">Recebedor de apostas (loteria)
</option><option value="Recebedor de apostas (turfe)
">Recebedor de apostas (turfe)
</option><option value="Recepcionista de banco
">Recepcionista de banco
</option><option value="Recepcionista de casas de espetáculos
">Recepcionista de casas de espetáculos
</option><option value="Recepcionista de consultório médico ou dentário
">Recepcionista de consultório médico ou dentário
</option><option value="Recepcionista de hotel
">Recepcionista de hotel
</option><option value="Recepcionista de seguro saúde
">Recepcionista de seguro saúde
</option><option value="Recepcionista, em geral
">Recepcionista, em geral
</option><option value="Recreador
">Recreador
</option><option value="Recreador de acantonamento
">Recreador de acantonamento
</option><option value="Recuperador de guias e cilindros
">Recuperador de guias e cilindros
</option><option value="Redator de publicidade
">Redator de publicidade
</option><option value="Redator de textos técnicos
">Redator de textos técnicos
</option><option value="Redeiro
">Redeiro
</option><option value="Redeiro (pesca)
">Redeiro (pesca)
</option><option value="Refinador de óleo e gordura
">Refinador de óleo e gordura
</option><option value="Refinador de sal
">Refinador de sal
</option><option value="Relações públicas
">Relações públicas
</option><option value="Relojoeiro (fabricação)
">Relojoeiro (fabricação)
</option><option value="Relojoeiro (reparação)
">Relojoeiro (reparação)
</option><option value="Remetedor de fios
">Remetedor de fios
</option><option value="Reparador de aparelhos de telecomunicações em laboratório
">Reparador de aparelhos de telecomunicações em laboratório
</option><option value="Reparador de aparelhos eletrodomésticos (exceto imagem e som)
">Reparador de aparelhos eletrodomésticos (exceto imagem e som)
</option><option value="Reparador de equipamentos de escritório
">Reparador de equipamentos de escritório
</option><option value="Reparador de equipamentos fotográficos
">Reparador de equipamentos fotográficos
</option><option value="Reparador de instrumentos musicais
">Reparador de instrumentos musicais
</option><option value="Reparador de rádio, tv e som
">Reparador de rádio, tv e som
</option><option value="Repórter (exclusive rádio e televisão)
">Repórter (exclusive rádio e televisão)
</option><option value="Repórter de rádio e televisão
">Repórter de rádio e televisão
</option><option value="Repórter fotográfico
">Repórter fotográfico
</option><option value="Repositor de mercadorias
">Repositor de mercadorias
</option><option value="Representante comercial autônomo
">Representante comercial autônomo
</option><option value="Restaurador de instrumentos musicais (exceto cordas arcadas)
">Restaurador de instrumentos musicais (exceto cordas arcadas)
</option><option value="Restaurador de livros
">Restaurador de livros
</option><option value="Retalhador de carne
">Retalhador de carne
</option><option value="Revelador de filmes fotográficos, em cores
">Revelador de filmes fotográficos, em cores
</option><option value="Revelador de filmes fotográficos, em preto e branco
">Revelador de filmes fotográficos, em preto e branco
</option><option value="Revestidor de interiores (papel, material plástico e emborrachados)
">Revestidor de interiores (papel, material plástico e emborrachados)
</option><option value="Revestidor de superfícies de concreto
">Revestidor de superfícies de concreto
</option><option value="Revisor de fios (produção têxtil)
">Revisor de fios (produção têxtil)
</option><option value="Revisor de tecidos acabados
">Revisor de tecidos acabados
</option><option value="Revisor de tecidos crus
">Revisor de tecidos crus
</option><option value="Revisor de texto
">Revisor de texto
</option><option value="Riscador de estruturas metálicas
">Riscador de estruturas metálicas
</option><option value="Riscador de roupas
">Riscador de roupas
</option><option value="Sacristão
">Sacristão
</option><option value="Salgador de alimentos
">Salgador de alimentos
</option><option value="Salsicheiro (fabricação de lingüiça, salsicha e produtos similares)
">Salsicheiro (fabricação de lingüiça, salsicha e produtos similares)
</option><option value="Salva-vidas
">Salva-vidas
</option><option value="Sanitarista
">Sanitarista
</option><option value="Sapateiro (calçados sob medida)
">Sapateiro (calçados sob medida)
</option><option value="Sargento bombeiro militar
">Sargento bombeiro militar
</option><option value="Sargento da policia militar
">Sargento da policia militar
</option><option value="Secador de madeira
">Secador de madeira
</option><option value="Secretária trilíngüe
">Secretária trilíngüe
</option><option value="Secretária(o) executiva(o)
">Secretária(o) executiva(o)
</option><option value="Secretário bilíngüe
">Secretário bilíngüe
</option><option value="Secretário - executivo
">Secretário - executivo
</option><option value="Segundo oficial de máquinas da marinha mercante
">Segundo oficial de máquinas da marinha mercante
</option><option value="Segundo tenente de polícia militar
">Segundo tenente de polícia militar
</option><option value="Selecionador de material reciclável
">Selecionador de material reciclável
</option><option value="Seleiro
">Seleiro
</option><option value="Senador
">Senador
</option><option value="Sepultador
">Sepultador
</option><option value="Sericultor
">Sericultor
</option><option value="Seringueiro
">Seringueiro
</option><option value="Serrador de bordas no desdobramento de madeira
">Serrador de bordas no desdobramento de madeira
</option><option value="Serrador de madeira
">Serrador de madeira
</option><option value="Serrador de madeira (serra circular múltipla)
">Serrador de madeira (serra circular múltipla)
</option><option value="Serrador de madeira (serra de fita múltipla)
">Serrador de madeira (serra de fita múltipla)
</option><option value="Serralheiro
">Serralheiro
</option><option value="Servente de obras
">Servente de obras
</option><option value="Subprocurador-geral da república
">Subprocurador-geral da república
</option><option value="Subprocurador-geral do trabalho
">Subprocurador-geral do trabalho
</option><option value="Supervisor de manutenção eletromecânica
">Supervisor de manutenção eletromecânica
</option><option value="Supervisor de manutenção eletromecânica (utilidades)
">Supervisor de manutenção eletromecânica (utilidades)
</option><option value="Supervisor de manutenção eletromecânica industrial, comercial e predial
">Supervisor de manutenção eletromecânica industrial, comercial e predial
</option><option value="Teólogo
">Teólogo
</option><option value="Terapeuta holístico
">Terapeuta holístico
</option><option value="Terapeuta ocupacional
">Terapeuta ocupacional
</option><option value="Tesoureiro de banco
">Tesoureiro de banco
</option><option value="Tingidor de couros e peles
">Tingidor de couros e peles
</option><option value="Tingidor de roupas
">Tingidor de roupas
</option><option value="Tipógrafo
">Tipógrafo
</option><option value="Titeriteiro
">Titeriteiro
</option><option value="Topógrafo
">Topógrafo
</option><option value="Torneiro (lavra de pedra)
">Torneiro (lavra de pedra)
</option><option value="Torneiro na usinagem convencional de madeira
">Torneiro na usinagem convencional de madeira
</option><option value="Torrador de cacau
">Torrador de cacau
</option><option value="Torrador de café
">Torrador de café
</option><option value="Torrista (petróleo)
">Torrista (petróleo)
</option><option value="Tosador de animais domésticos
">Tosador de animais domésticos
</option><option value="Tropeiro
">Tropeiro
</option><option value="Turismólogo
">Turismólogo
</option><option value="Viveirista florestal
">Viveirista florestal
</option><option value="Xaropeiro
">Xaropeiro
</option><option value="Zelador de edifício
">Zelador de edifício
</option><option value="Zootecnista">Zootecnista</option>
</select>
答案 2 :(得分：0)
HEAD
<head>
<title>Projeto 02 - Desenvolvimento WEB</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="http://kelvin.96.lt/centralizaDivs.css">
<link rel="stylesheet" type="text/css" href="http://kelvin.96.lt/style.css">
<script type="text/javascript" src="http://kelvin.96.lt/validadores.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
JAVASCRIPT
<script>
$(document).ready(function () {
$("#ocupacoes").select2();
});
</script>
答案 3 :(得分：0)
I had to rearrange the file's imports so JQuery was first imported, just then select2 could be imported.
Thanks to Mehdi Dehgani for helping find the answer via the console log.