Question

我有一个包含一些输入表单的搜索框和一个带有一些选项的选择表单。其中一个输入表单是从Google地图自动填充的地方，如果没有任何选择表单，它可以正常工作。如果在我的搜索框中我有一个带有一些选项的选择表单，当我使用带有地方自动填充的输入表单时，当按下键输入时，我的页面会重新加载，并且在网址的最后显示?，就像这个http://www.lasige.di.fc.ul.pt/webtools/ondequemvaiver/agora/? 您可以在此处测试此问题：my app 在表单Onde中输入Lisboa，然后按键输入。

HTML：

<div class="row">
        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pesquisar">Pesquise</label>
                    <input type="text" class="form-control" id="pesquisar" placeholder="Pesquisar...">
                </div>
                <div class="form-group">
                    <label for="quando">Quando</label>
                    <input type="text" class="form-control" id="quando" placeholder="Quando">
                </div>
            </form>
        </div>

        <div class="col-xs-5 coluna-input">
            <form role="form">
                <div class="form-group">
                    <label for="pac-input">Onde</label>
                    <input type="text" class="form-control" id="pac-input" placeholder="Onde">
                </div>
                <div class="form-group">
                    <label for="genero">Género</label>
                    <select class="form-control" id="genero">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
            </form>
        </div>

我的代码：

ev.views.Home = Backbone.View.extend({
    // construtor
    initialize: function(map, p, firstEntry){
        var that = this;
        that.template = _.template(ev.templateLoader.get('home'));
        // evento que e disparado quando o router atual muda
        ev.router.on("route", function(route, params) {
            that.deleteMarkers();
        });
        that.map = map; // variavel com o mapa
        that.firstEntry = firstEntry; // valor do firstEntry quando entra no router pagesearch
        that.p = p; // valor da pagina
        that.icons = [];
        that.render(that.map, that.p, that.firstEntry);
    },

    // funcao que representa a funcionaliade de pesquisar por localidade
    local: function(map){
        var that = this;
        that.map = map;
        var input = (that.$el.find('#pac-input')[0]);

        var options = {
            types: ['geocode'],
            componentRestrictions: {country: "pt"}
        };

        var autocomplete = new google.maps.places.Autocomplete(input, options);
        autocomplete.bindTo('bounds', that.map);

        var infowindow = new google.maps.InfoWindow();


        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
              that.map.fitBounds(place.geometry.viewport);
              that.map.setZoom(12);
              that.map.setCenter(place.geometry.location);
            } else {
              that.map.setCenter(place.geometry.location);
              that.map.setZoom(12);  // Why 17? Because it looks good.
            }


        }); 
    },

    events: {
        'click #search' : 'searchKey',
        'click #maisFiltros' : 'maisFiltros',
        'mouseover .back' : 'overImagem'    
    },



    // funcao que renderiza o template e a collection que contém a lista de eventos
    render: function(map, p, firstEntry){
        var that = this;
        that.map = map;
        that.firstEntry = firstEntry;
        that.p = p;
        that.$el.html(that.template());
        setTimeout(function() {
            that.local(that.map);
            // entra so o utilizador nao fizer pesquisa ou se fizer e entrar no route pagesearch
            if(that.firstEntry != 0){
                that.marcadores = new ev.views.Markers(that.map,p);
                $("#lista").html(new ev.views.ListaEventos(that.p).el);
            }else{
                // obtem os valores dos campos de pesquisa que estao guardados na chave key
                // que deopis passa esses valores para a pesquisa
                that.keyword = ev.keyword.get('key');
                that.secondSearch = new ev.views.Pesquisa(that.keyword, that.p, that.map);
                $("#lista").html(that.secondSearch.el);
            }
        }, 0);
        return that;
    }

});

Answer 1

$("input[type='text']").keydown(function(e){if (e.keyCode == 13){e.preventDefault();return false;}})

这会为类型文本的所有输入设置一个键处理程序，从而禁用enter上的默认操作。这将对您页面上的每个输入执行此操作，您可以在不使用默认行为的情况下更改所需的输入。

按下键时输入表格和选择表格之间的冲突

1 个答案: