Question

我对前端世界很不熟悉，我正努力让这个工作。

$('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 6
}, {
    source: function (query, process) {
        return $.get('autocompleteCodiceFiscale', {
            codiceFiscale: query
        }, function (data) {
            //alert(JSON.stringify(data));
            return process(data.options);
        });
    }
}).on('typeahead:selected', function (evt, data) {
    //Mocking some data
    if (data.length >= 16) {
        $('#nome').val("Mohamed");
        $('#cognome').val("Shafik");
        $('#sesso').val("Maschio");
        $('#codiceRegionale').val("RomaB");
        $('#codiceFiscale').val("SHFMMD81D06Z336B");
        $('#dataNascita').val("6/04/1981");
        $('#indirizzo').val("Via della prova");
        $('#numeroCivico').val("123");
        $('#comune').val("Roma");
        $('#cap').val("00100");
        $('#telFisso').val("0612345678");
        $('#telMobile').val("3471234567");
        $('#email').val("prova@lait.it");
        $('#aslCircoscrizione').val("Roma IV");
    } else {
        // do other stuff
    }
});

这不会出现任何错误，但不显示返回的数据，警报显示请求的信息正确返回。

如果我像这样使用它

var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
        var matches, substringRegex;

        // an array that will be populated with substring matches
        matches = [];

        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');

        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });

        cb(matches);
    };
};

var anagrafica = ['SHFMMD81D06Z336B - Mohamed Shafik - 06/04/1981',
    'SHFMMD81D06Z336B - Mohamed Shafik - 06/04/1982',
    'MRTCLG81D08G442B - Calogero Martello - 01/01/1981'
];

$('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 6
}, {
    name: 'anagrafica',
    source: substringMatcher(anagrafica)
}).on('typeahead:selected', function(evt, data) {
    //Mock
    if (data.length >= 16) {
        $('#nome').val("Mohamed");
        $('#cognome').val("Shafik");
        $('#sesso').val("Maschio");
        $('#codiceRegionale').val("RomaB");
        $('#codiceFiscale').val("SHFMMD81D06Z336B");
        $('#dataNascita').val("6/04/1981");
        $('#indirizzo').val("Via della prova");
        $('#numeroCivico').val("123");
        $('#comune').val("Roma");
        $('#cap').val("00100");
        $('#telFisso').val("0612345678");
        $('#telMobile').val("3471234567");
        $('#email').val("prova@lait.it");
        $('#aslCircoscrizione').val("Roma IV");
    } else {
        //do other stuff
    }
});

一切正常。

我的控制器看起来像这样

@RequestMapping(value = { "autocompleteCodiceFiscale" }, method = RequestMethod.GET, produces="application/json")
    public @ResponseBody TempClass autocompleteCodiceFiscale(@RequestParam String codiceFiscale, ModelMap map) {
        List<AssistitoDTO> assistiti = //requested data from the db

        TempClass autocomplete = new TempClass();
        for(AssistitoDTO assistito : assistiti)
        {
            autocomplete.options = new ArrayList<String>();
          autocomplete.options.add(assistito.getAnagrafica().getCodiceFiscale() + " - " +
                             assistito.getAnagrafica().getCognome() + " " +
                             assistito.getAnagrafica().getNome() + " - " +
                             assistito.getAnagrafica().getDataNascita().getDay() + "/" +
                             assistito.getAnagrafica().getDataNascita().getMonth() + "/" +
                             assistito.getAnagrafica().getDataNascita().getYear());
        }       
        System.out.println("La string JSON è: " + new Gson().toJson(autocomplete));
        return autocomplete;
    }

    private class TempClass
    {
        public List<String> options;
    }

我知道它看起来很丑，但我只是在测试为什么它现在不起作用。我不认为我需要显示我的CSS因为它与模拟正常工作。顺便说一句，建议甚至没有填充，这不是一个视觉问题。我为我的英语道歉。

Answer 1

天哪，我终于解决了它，我已经把它变得相当多了，这就是结果，

＆＃13;

var people = new Bloodhound({
    	    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('codiceFiscale'),
    	    queryTokenizer: Bloodhound.tokenizers.whitespace,
    	    remote: {
    	    	url: 'autocompleteCodiceFiscale/?codiceFiscale=%QUERY',
    	  		wildcard: '%QUERY'
    	    }
    	});

    	people.initialize();

    	$('#the-basics .typeahead').typeahead({
    	  minLength: 6
    	}, {
    		limit: 10,
    	    name: 'people',
    	    display: 'codiceFiscale',
    	    source: people.ttAdapter(),
    	    templates: {empty: [
    	                          '<div class="empty-message">',
    	                          'Nessun assistito / assistibile trovato',
    	                          '</div>'
    	                       ].join('\n'),
    	                suggestion: Handlebars.compile('<div><strong>{{codiceFiscale}}</strong> - {{cognome}} {{nome}} - {{dataNascita}}</div>')
    	    }
    	}).on('typeahead:selected', function(obj, datum) {
    	    // Do stuff
    	});
      </script>

＆＃13;

并且控制器也已被修改

＆＃13;

@RequestMapping(value = { "autocompleteCodiceFiscale" }, method = RequestMethod.GET, produces="application/json")
	public @ResponseBody List<Temp> autocompleteCodiceFiscale(@RequestParam String codiceFiscale, ModelMap map) {
		List<AssistitoDTO> assistiti = //data from the DB
		List<Temp> autocomplete = new ArrayList<Temp>();
		for(AssistitoDTO assistito : assistiti)
		{
			Temp assTemp = new Temp();
			assTemp.codiceFiscale = assistito.getAnagrafica().getCodiceFiscale();
			assTemp.nome = assistito.getAnagrafica().getNome();
			assTemp.cognome = assistito.getAnagrafica().getCognome();
			assTemp.dataNascita = assistito.getAnagrafica().getDataNascita().getDay() + "/" +
								  assistito.getAnagrafica().getDataNascita().getMonth() + "/" +
								  assistito.getAnagrafica().getDataNascita().getYear();
			autocomplete.add(assTemp);
		}		
		System.out.println("La string JSON è: " + new Gson().toJson(autocomplete));
		return autocomplete;
	}
	
	private class Temp
	{
		public String codiceFiscale;
		public String nome;
		public String cognome;
		public String dataNascita;
	}

＆＃13;

它最终会像这样工作。

Twitter类型未与ajax合作

1 个答案: